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

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 on the toast for customizing (like info or warning for example), you can do that as follows:

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

Multiple classes also can be assigned as a string, with spaces between class names.

Browsers support

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

Contributors


rndevfx	Wachiwi

gurindersingh/toastify-js