toasters

Toast alerts/notifications (initially developed for Vue.js with a material-design style)

Installation

npm install --save --production toasters

Usage

HTML:

<div id="toasts-container" class="position-right position-bottom">
  <div id="toasts-content">
    <!-- toasts will be added or removed from here -->
  </div>
</div>

JS:

import Toast from "toasters";

// example
new Toast({
  content: "Hello World",
  interactable: false
});

// or
new Toast("Hello World");

// or
new Toast("Hello World", { persistent: true, timeout: 9000 });

Preview:

Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | content | String | "" | The notification message. | | persistent | Boolean | false | Whether or not the toast is persistent. | | interactable | Boolean | true | If the toast can be manually closed or not. | | timeout | Number | 6000 | How long till the toast disappears. Note: will be ignored if the toast is persistent. | | visible | Boolean | true | If the toast will be visible when instantiated. |

Potential future additions

• Error handling (i.e. you haven't provided any content for the toast)
• Ability to parse markdown or html

Contributing

# install dependencies
npm install

# watch files for changes with webpack
npm run dev

# build for production with minification
npm run build