Toastify is a lightweight, vanilla JS toast notification library.

Click here

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

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

• 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'

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

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

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)",
  classes: "info",
}).showToast();

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

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

rndevfx	Wachiwi

MIT © Varun A P