Package Exports

breadstick

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (breadstick) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Breadstick

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

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

Demo

🌟 Features

An imperative API. This means that you don't need to set component state or render elements to trigger notifications. Instead, just call a function. This makes it very user friendly for component library authors.
Render whatever you want. Utilize the render callback to create entirely custom notifications.
Functional default styles. Import the provided css for some nice styling defaults or write your own styles.
JS agnostic notifications. Breadstick can be incrementally adopted to your application since it uses the already progressive Vue.js under the hood.

📚 Table of Contents

Installation
Examples
- Basic Usage
- Using different positions
Advanced Usage

🥳 Breadstick Starters

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

Vue.js Starter: http://bit.ly/breadstick-vue
Nuxt.js Starter: http://bit.ly/breadstick-nuxt

⚡️ 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'
import "breadstick/dist/breadstick.css";

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

🤖 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

[
  '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>
)

🏗 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.

🌮 With Vue's `render` function callback

import Alert from './components/Alert'

export default {
  name: 'app',
  mounted () {
    // Breadstick renders your custom `Alert` component
    this.$breadstick.notify(({ h, onClose }) => {
      return h(Alert, {
        on: {
          click: onClose
        }
      }, 'A render function Alert notification')
    })
  }
}

🚚 With JSX

import Alert from './components/Alert'

export default {
  name: 'app',
  mounted () {
    const showAlert = () => alert('Hello!')
    // Breadstick renders your custom `Alert` component
    breadstick.notify(({ onClose }) => {
      return (
        <Alert onClick={onClose}>
          An JSX Alert notification
        </Alert>
      )
  }
}