repository·master·Indexed 25 days ago
https://github.com/apvarun/toastify-jsA lightweight, vanilla JavaScript library for creating customizable toast notifications that do not block the execution thread. Version 1.12.0 supports custom HTML nodes, flexible positioning via gravity and offset, and various configuration options for duration, styling, and interactivity.
After installing, import the library and its default CSS into your JavaScript module. You can use the default CSS or override it with your own styles.
import Toastify from 'toastify-js'
import "toastify-js/src/toastify.css"If you are not using a module bundler, you can include Toastify via jsDelivr by adding the CSS link in your <head> and the script tag at the bottom of your <body>.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>To add toastify-js to your project, use either npm or yarn:
npm install --save toastify-jsor
yarn add toastify-js -Stext, you can pass a DOM element to the node option. This allows for complex layouts within a toast. When node is provided, it takes precedence over the text property.Instead of using the text property, you can pass a DOM node via the node property. When using node, the text and escapeMarkup properties are ignored.
Alternatively, you can pass an HTML string to text and set escapeMarkup: false to render custom HTML content.
You can make toasts interactive in two ways:
destination URL. If newWindow is true, it opens in a new tab; otherwise, it navigates the current window.onClick function. This is used if destination is not provided.Note: event.stopPropagation() is used internally to prevent click events from bubbling up to parent elements.
To display a toast, call the Toastify() function with a configuration object and chain the .showToast() method.
Toastify({
text: "This is a toast",
duration: 3000,
destination: "https://github.com/apvarun/toastify-js",
newWindow: true,
close: true,
gravity: "top", // `top` or `bottom`
position: "left", // `left`, `center` or `right`
stopOnFocus: true, // Prevents dismissing of toast on hover
style: {
background: "linear-gradient(to right, #00b09b, #96c93d)",
},
onClick: function(){}
}).showToast();Note: Toast messages will be centered on devices with screen width less than 360px.
Use the offset object to push the toast away from its gravity/position anchor. The x and y values can be numbers (pixels) or strings (e.g., '2em').
position is left, x pushes from the left.gravity is bottom, y pushes from the bottom.Toastify({
text: "This is a toast with offset",
offset: {
x: 50,
y: 10
},
}).showToast();Toastify({
text: "This is a toast with offset",
offset: {
x: 50, // horizontal axis - can be a number or a string indicating unity. eg: '2em'
y: 10 // vertical axis - can be a number or a string indicating unity. eg: '2em'
},
}).showToast();Use the className option to apply custom CSS classes (e.g., for 'info' or 'warning' styles). You can provide multiple classes as a space-separated string.
Toastify({
text: "This is a toast",
className: "info",
style: {
background: "linear-gradient(to right, #00b09b, #96c93d)",
}
}).showToast();The Toastify constructor accepts an options object to customize the notification. Below are the available configuration keys:
| Key | Type | Default | Description |
|---|---|---|---|
text | string | 'Toastify is awesome!' | The message text to display. |
node | HTMLElement | undefined | A DOM node to display instead of text. |
duration | number | 3000 | Duration in ms. Set to 0 to make it persistent. |
selector | string or HTMLElement | undefined | The parent element/ID where toasts will be appended. Defaults to document.body. |
callback | function | function(){} | Function called after the toast is removed from the DOM. |
destination | string | undefined | URL to navigate to on click. |
newWindow | boolean | false | If true, opens destination in a new window. |
close | boolean | false | If true, shows a close icon. |
gravity | string | 'toastify-top' | Position: 'toastify-top' or 'toastify-bottom'. |
position | string | '' | Position: 'left', 'center', or 'right'. (Note: positionLeft is deprecated). |
backgroundColor | string | '' | Background color (Deprecated: use style.background instead). |
avatar | string | '' | URL or path to an image to display as an avatar. |
className | string | '' | Additional CSS classes to add to the toast. |
stopOnFocus | boolean | true | If true, the timer pauses when the mouse is over the toast. |
onClick | function | function(){} | Callback function triggered when the toast is clicked (only if destination is not set). |
offset | {x: number, y: number} | {x: 0, y: 0} | Custom offset for the toast position. |
escapeMarkup | boolean | true | If true, treats text as plain text. If false, treats it as HTML. |
ariaLive | string | 'polite' | ARIA live region setting for screen readers. |
style | object | {background: ''} | An object of CSS properties to apply directly to the toast element. |
The following options can be passed to the Toastify() constructor:
| Option Key | type | Usage | Defaults |
|---|---|---|---|
| text | string | Message to be displayed in the toast | "Hi there!" |
| node | ELEMENT_NODE | Provide a node to be mounted inside the toast. node takes higher precedence over text | |
| duration | number | Duration for which the toast should be displayed.<br>-1 for permanent toast | 3000 |
| selector | string | ELEMENT_NODE | ShadowRoot | CSS Selector or Element Node on which the toast should be added |
| destination | URL string | URL to which the browser should be navigated on click of the toast | |
| newWindow | boolean | Decides whether the destination should be opened in a new window or not | false |
| close | boolean | To show the close icon or not | false |
| gravity | "top" or "bottom" | To show the toast from top or bottom | "top" |
| position | "left" or "right" | To show the toast on left or right | "right" |
| backgroundColor | CSS background value | To be deprecated, use style.background option instead. Sets the background color of the toast | |
| avatar | URL string | Image/icon to be shown before text | |
| className | string | Ability to provide custom class name for further customization | |
| stopOnFocus | boolean | To stop timer when hovered over the toast (Only if duration is set) | true |
| callback | Function | Invoked when the toast is dismissed | |
| onClick | Function | Invoked when the toast is clicked | |
| offset | Object | Ability to add some offset to axis | |
| escapeMarkup | boolean | Toggle the default behavior of escaping HTML markup | true |
| style | object | Use the HTML DOM Style properties to add any style directly to toast | |
| ariaLive | string | Announce the toast to screen readers | "polite" |
| oldestFirst | boolean | Set the order in which toasts are stacked in page | true |
Note: backgroundColor is deprecated. Use style.background instead.
.hideToast() method. This will clear the timeout and remove the element from the DOM.