toastify-js

Toastify

Toastify is a lightweight, vanilla JS toast notification library.

Demo

Click here

Features

• Multiple stacked notifications
• Customizable
• No blocking of execution thread

Customization options

• Notification Text
• Duration
• Toast background color
• Close icon display
• Display position

Installation

Toastify now supports installation via NPM

• Run the below command to add toastify-js to your exisitng or new project.

npm install --save toastify-js

or

yarn add toastify-js -S

• Import toastify-js into your module to start using it.

import Toastify from 'toastify-js'

Adding ToastifyJs to HTML page using the traditional method

To start using Toastify, add the following CSS on to your page.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

And the script at the bottom of the page

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Files are delivered via the CDN service provided by jsdeliver

Documentation

Toastify({
    text: "This is a toast",
    duration: 3000,
    destination: 'https://github.com/apvarun/toastify-js',
    newWindow: true,
    close: true,
    gravity: "top", // `top` or `bottom`
    positionLeft: true, // `true` or `false`
    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
}).showToast();

Toast messages will be centered on devices with screen width less than 360px.

• See the changelog

Add own custom classes

If you want to use custom classes (like info or warning for example) you can do that via

Toastify({
    text: "This is a toast",
    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    classes: "info"
}).showToast();

Browsers support

IE / Edge	Firefox	Chrome	Safari	Opera
IE10, IE11, Edge	last 10 versions	last 10 versions	last 10 versions	last 10 versions

License

MIT © Varun A P