• Stars
    star
    120
  • Rank 296,083 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🥖A simple and flexible stacking, positioning & dismissal API for authored toast style notifications in Vue.js

🚀 A simple and flexible implementation of toast style notifications for Vue.js.

All Contributors


Breadstick

A simple and flexible implementation of toast style notifications for Vue.js.

🌟 Inspired by toasted-notes for React - which I think is really cool. ❤️

Demo

🌟 Features

  • Functional Stacking, Positioning, Timing & Dismissal API. Breadstick exposes a function that allows you to to control the stacking, positioning and dismissal of authored toast style notifications.
  • Render whatever you want. Utilize the render callback to create beautiful custom notifications.
  • Functional default styles. Import the provided css for some nice styling defaults or write your own styles.
  • Vue framework-agnostic notification. Breadstick is un-opininated about the styling of your Vue toast notifications. It's main strengths are in handling the business logic of stacking, positioning, timing & dismissal of your toast notifications.

📚 Table of Contents

🥳 Breadstick Starters

Here are a few Codesandbox starters you can use to get started with Breadstick in your Vue or Nuxt App.

⚡️ Installation

Install breadstick and its peer dependency, animejs, using yarn or npm.

npm install breadstick animejs --save

You can then register BreadstickBakery as a Vue plugin.

import Vue from 'vue'
import { BreadstickBakery } from 'breadstick'

// This exposes `this.$breadstick` in your Vue template.
Vue.use(BreadstickBakery)

Installing with Nuxt

After installing Breadstick, we import it and register it as a client-side plugin. This is because Breadstick it makes use of some DOM APIs. Code is similiar to the Vue plugin shown above.

🤖 Examples

Breadstick can be used to render different types of notifications out of the box. You can render simple string notifications as well as custom styled notifications. This makes it really convenient.

🍊 Basic usage

Invoke a notification using the notify method to display a message to the user. Breadstick defaults the notification duration to 5 seconds in the top position.

this.$breadstick.notify('🥞 Show me the pancakes')

📚 Using different positions

You can display notifications in different positions, including top-left, top, top-right, bottom-left, bottom, and bottom-right.

[
  'top-left', 
  'top', 
  'top-right', 
  'bottom-left', 
  'bottom', 
  'bottom-right'
].forEach(position => {
  this.$breadstick.notify("Using position " + position, {
    position
  })
})

🏠 Using custom element

With JSX or Vue's render function, breadstick is able to render a custom element or Vue component

this.$breadstick.notify(
  <div>I am a custom HTML element</div>
)

📭 Close all notifications

You can clear all notifications by calling breadstick's closeAll method

this.$breadstick.closeAll()

🏗 Advanced usage

Whereas breadstick shines in making simple notifications for your Vue app, it's real strength is shown in allowing you to create custom notifications through it's render function callback.

This is particularly useful if you want use custom themed elements or Vue components inside of your toast notification. In the following snippet, we render a custom Alert component to display a toast notification.

This is particularly useful for building your own themed notification component library.

Here is an advanced examples of how to use breadstick to render you own authored toast notifications.

🌮 With Vue's render function callback

Breadstick exposes Vue's createElement function in the render callback that you can use to render your own components in a toast notification. This can be useful in a context where Vue's this context may not be available.

In a Vue component, you can even use that component's this.$createElement to render your own element/component and return it in the render function callback so breadstick can display it.

// Import your custom `Alert` component and render it in breadstick
import Alert from './components/Alert'

export default {
  mounted () {
    this.$breadstick.notify(({ h, onClose }) => {
      return h(Alert, {
        on: {
          click: onClose
        }
      }, 'A render function Alert notification')
    })
  }
}

🚚 With JSX

You can also use JSX if you like :).

// Import your custom `Alert` component and render it in breadstick
import Alert from './components/Alert'

export default {
  mounted () {
    breadstick.notify(({ onClose }) => {
      return (
        <Alert onClick={onClose}>
          An JSX Alert notification
        </Alert>
      )
    }
  }
}

💼 API

notify(String|VNode|Function, options)

  • Arguments
    • { String | VNode | Function } Message
    • { Object } options

Breadstick's notify method accepts two parameters. The first parameter can be a String, VNode (Object), or Function and the second is the options object.

If a string is passed in the first argument, breadstick will render a notificiation with the string in the top center position with it's default internal component.

this.$breadstick.notify('Simple notification.')

If a VNode is passed, Breadstick treats it like a rendered component and renders it instead.

this.$breadstick.notify(
  <div>I am a custom HTML element</div>
)

If a callback Function is passed in the first argument, it will expose an object with two parameters: h and the onClose which are both functions. Using a render callback allows you to tap into the close function. It's your best option if you want to completely re-style your toast notification

this.$breadstick.notify(({ h, onClose }) => {
  return h('div', 'My custom notification')
})

Options

Option Type Default Values
position String top top, right, bottom, left, top-left, top-right, bottom-right, bottom-left
duration Number 5000 Any number in milliseconds

closeAll()

  • Type: Function The closeAll method closes all toast notifications that are visible in the UI at the time of invocation. Nice a succinct way to dismiss all notifications

🔖 TODO:

Breadstick still has a few more features coming up. These include:

  • Indefinitely display toast notification
  • Allow sharing of same application Vue instance.

🤝 Contributing

Here's our contribution guide.

❤️ Support this project

If you like this project, please consider supporting it by buying my a coffee!

Buy me a coffee
Made with ❤️ by Jonathan Bakebwa 🇺🇬

Contributors

Thanks goes to these wonderful people (emoji key):


Jonathan Bakebwa

💻 📖

Omereshone Kelvin Oghenerhoro

📖

This project follows the all-contributors specification. Contributions of any kind welcome!

More Repositories

1

nuxt-mdx-poc

Proof of concept for Nuxt.js Documentation with MDX + Vue live editor
Vue
15
star
2

vue-simple-scrollbar

🦉 A simple friendly lightweight Vue.js scrollbar to make take your scrollbar game to the next level.
Vue
13
star
3

instagram-chakra

Instagram Feed Page Built on Chakra UI Vue
Vue
12
star
4

miro-landing-chakra

Clone of Miro's landing page made with Chakra UI Vue
Vue
12
star
5

popper-vue

🎊 A lightweight Popper utility component for Vue.js
JavaScript
10
star
6

slack-landing-chakra

Chakra UI Vue implementation of Slack's landing page
Vue
7
star
7

mdx-2-vite-vue-3

TypeScript
6
star
8

dark.nuxt

An opinionated, dark-themed Nuxt.js & Chakra UI Vue GitHub repository template
Vue
5
star
9

file-contributors

🦑 Just a function that gets individual contributors for a specific file on github.
TypeScript
5
star
10

chakra-nuxt-v1-demo

TypeScript
5
star
11

chakra-ui-chidori-starter

Template for Chakra UI Vue v1 with Typescript, Vite, components auto-importing, layouts, and static site generation.
Vue
5
star
12

feather-icons-paths

The awesome feather icons exported as paths
JavaScript
4
star
13

chakra-demo-side-nav

Chakra UI Vue Example App
Vue
4
star
14

breadstick-examples

Example application on how to render custom Vue notifications
Vue
4
star
15

group-4-sockets

JavaScript
3
star
16

potato

🥔 A simple silly browser editor for my personal use
Vue
3
star
17

mdx-vue-demo

JavaScript
3
star
18

chakra-jobs-app

Demo application for thesis project made with Chakra UI Vue
Vue
3
star
19

chakra-vue-v1-demo

TypeScript
2
star
20

mw.storefront

TypeScript
2
star
21

website

Vue
2
star
22

axiajs

Building blocks for decentralized Web 3 applications on Ethereum and Solana
TypeScript
2
star
23

laduzi

An introductory tutorial in vue, vue-router and vuex
JavaScript
1
star
24

jam-stack-eleventy

CSS
1
star
25

nuxt.emotion

TypeScript
1
star
26

polymorphic-as-child-vue

Created with StackBlitz ⚡️
TypeScript
1
star
27

mdx-vue-loader

JavaScript
1
star
28

kiwi-nuxt-mdx

JavaScript
1
star
29

ByaTechnologyWebsite

Bya Technology Website Initial Commit
JavaScript
1
star
30

compiler-principles-spring-2020

JavaScript
1
star
31

nodejs-express-webpack

NodeJS, Express and Webpack Starter Project
JavaScript
1
star
32

uniform-dev-stream-demo-chakra-ui

TypeScript
1
star
33

mdx-vue

JavaScript
1
star
34

mtalk-webpack

Vue
1
star
35

child-parent-events

Vue.js - Event emitting from child to parent, Props passing from parent to child
JavaScript
1
star
36

vsc

JavaScript
1
star
37

browserDuckTyper

Browser Detection using Duck Typing in Javascript
JavaScript
1
star
38

astrofirm

Simple Space Law Firm
CSS
1
star
39

vue.animations.exploration

TypeScript
1
star
40

node-graphql

Simple GraphQL data querying and mutation with Node.js & Express
JavaScript
1
star
41

nchito-template

Template for Nchito on live stream with Daniel
Vue
1
star
42

nuxt-chakra-test

testing chakra with nuxt
Vue
1
star
43

mdx-live-docs-test

Vue
1
star
44

turtles-webrtc-stream

WebRTC video streaming example application
JavaScript
1
star
45

proof-of-history

Rust
1
star