Toastify

Toastify is a lightweight, vanilla JS toast notification library.

Demo

Click here

Features

• Multiple stacked notifications
• No blocking of execution thread

Customization options

• Notification Text
• Duration
• Close icon display
• Display position
• Offset position

Installation

Toastify now supports installation via NPM

• Run the below command to add toastify-js to your existing 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'

You can use the default CSS from Toastify as below and later override it or choose to write your own CSS.

import "toastify-js/src/toastify.css"

Adding Toastify 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

New toasts are created by calling the core Toastify function, and then shown to the user by calling it's showToast function.

Toastify({
  text: "This is a simple toast using default values.."
}).showToast();

Toast are configured by means of specific keys in the configuration object passed in at the time of creation.

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

• See the changelog

API

text string (required)

Message to be displayed in the toast

• default: undefined
• notes:
  • toast will fail to render if a message is not provided.

node ELEMENT_NODE

Provide a node to be mounted inside the toast. node takes higher precedence over text

• default: undefined

duration number

Duration for which the toast should be displayed.

• default: 3000
• options:
  • any positive integer in milliseconds
  • -1 for a persistent toast that must be explicitly dismissed
• notes:
  • this implicitly enables close unless onClick is defined

selector string | ELEMENT_NODE | ShadowRoot

CSS Selector or Element Node on which the toast should be added

• default: body

destination URL string

URL to which the browser should be navigated on click of the toast

• default: undefined

newWindow boolean

Decides whether the destination should be opened in a new window or not

• default: false

close boolean

To show the close icon or not

• default: false

gravity "top" or "bottom"

To show the toast from top or bottom

• default: "top"
• options:
  • "top" to start lining up toasts from the top viewport edge
  • "bottom" to start lining up toasts from the bottom viewport edge

position "left" or "right"

To show the toast on left or right

• default: "right"
• options:
  • "left" to position toast along the left viewport edge
  • "right" to position toast along the right viewport edge

avatar URL string

Image/icon to be shown before text

• default: undefined

className string

Ability to provide custom class name for further customization

• default: undefined

stopOnFocus boolean

To stop timer when hovered over the toast (Only if duration is set)

• default: true

callback Function

Invoked when the toast is dismissed

• default: undefined

onClick Function

Invoked when the toast is clicked

• default: undefined

offset Object

Ability to add some offset to axis

• default: undefined
• options:
  • { x: number } to set the horizontal offset
  • { y: number } to set the vertical offset
  • { x: number, y: number } to set the both offsets
• notes:
  • if position or gravity are used, this offset will push the toast inwards from the relevant edge.

escapeMarkup boolean

Toggle the default behavior of escaping HTML markup

• default: true

ariaLive string

Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options

• default: "polite"
• options:
  • "off" will prevent screen readers from reading the notification
  • "polite" will cause screen readers to read the notification when the user is next idle
  • "assertive" will cause screen readers to read the notification as soon as it is shown

oldestFirst boolean

Set the order in which toasts are stacked in page

• default: true

Browsers support

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

Contributors

AStoker	caiomoura1994	rndevfx	1ess	d4rn0k	danielkaiser80
skjnldsv	chasedeanda	chrisgraham	Wachiwi	FeixuRuins	gavinhungry
haydster7	joaquinwojcik	juliushaertl	mort3za	Sandip124	Tadaz
t12ung	victorfeijo	fiatjaf	prousseau-korem

License

MIT © Varun A P