node package manager

toaster-js

Toaster-JS

npm Dependencies npm License

The vanilla JavaScript ES6 minimalistic easy-to-use toast pup-up messages module. The solution which "just works" – add the module to your project and go further.

Supported by all major browsers and IE 10+ (requestAnimationFrame support). Safe to use with ReactJS and other virtual-dom frameworks.

Preview

See the demo here.

Screenshot

Features

  • Simple CSS-animated customizable toast pop-ups for any design;
  • No dependencies and < 1kb code;
  • Toasts have different types and apply any style you need;
  • Toasts appear and disappear by specifying optional timeout.

Installation & Usage

Toaster-JS is primarily ES6 module. See it in action:

npm install toaster-js --save-dev
import { Toast } from "toaster-js";
 
new Toast("Welcome!");
new Toast("There is no more toasts!", Toast.TYPE_ERROR, Toast.TIME_NORMAL);

You can import pre-defined css/scss styles for your toasts. There are two files (css/scss) available.

import "toaster-js/default.scss"; // or @import "../node_modules/toaster-js/default.scss"; from SCSS 

You can set up additional options if you need. See the API below.

import { configureToasts } from "toaster-js";
 
configureToasts({
    topOrigin: 0
});

If you need to load ES5 (UMD) module, use the following:

var Toast = require("toaster-js/umd.js");

If you need the module with a script tag, use this:

<script type="text/javascript" src="https://cdn.rawgit.com/ZitRos/toaster-js/master/umd.js"></script>

API

Toast(message, type, timeout)

Creates a new toast pop-up message on the screen. Pass a string message to specify the message text, type = Toast.TYPE_* to specify the type and timeout = Toast.TIME_* to specify the timeout. Timeout constants are the numbers of milliseconds for message to stay on screen. For example, new Toast("Baked!", Toast.TYPE_ERROR, 10000) message will stay on the screen for 10 seconds.

  • TIME_SHORT = 2 seconds
  • TIME_NORMAL = 4 seconds
  • TIME_LONG = 8 seconds
  • TYPE_INFO = "info"
  • TYPE_MESSAGE = "message"
  • TYPE_WARNING = "warning"
  • TYPE_ERROR = "error"
  • TYPE_DONE = "done"
configureToasts(options)

Allows to configure some options of the toast. The available optional options are listed below:

configureToasts({
    topOrigin: -100 // [default=0] Y-axis origin of the messages.  
});

Contributing

Feel free to help improving the project. Building the umd.js module:

npm install
npm run build