Author: | apvarun |
---|---|
Views Total: | 4,497 views |
Official Page: | Go to website |
Last Update: | July 21, 2022 |
License: | MIT |
Preview:

Description:
Toastify is a simple, lightweight, vanilla JavaScript library used for sending stackable, non-blocking toast messages to end-users.
How to use it:
Import the main JavaScript file ‘toastify.js’ into the html document.
<script src="src/toastify.js"></script>
Create a basic toast message and specify the duration in milliseconds to hide the notification.
var myToast = Toastify({ text: "This is a toast message", duration: 5000 })
You are also allowed to load messages from a DOM node.
var myToast = Toastify({ node: elementNode, duration: 5000 })
Show the toast message. In this example, the toast message will auto dismiss after 5 seconds.
myToast.showToast();
The default CSS for the toast message. Copy and paste the CSS styles as displayed below into your web page.
.toastify { padding: 12px 20px; color: #ffffff; display: inline-block; box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3); background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5); background: linear-gradient(135deg, #73a5ff, #5477f5); position: fixed; top: -150px; right: 15px; opacity: 0; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); border-radius: 2px; cursor: pointer; } .toastify.on { opacity: 1; }
Specify the container in which you want to display the toast message.
myToast = Toastify({ text: "This is a toast message", duration: 5000, selector: '#container' })
Execute a callback function as you click on the toast message.
myToast = Toastify({ text: "This is a toast message", duration: 5000, onClick: function(){} })
Execute a callback function after the toast message is dismissed.
myToast = Toastify({ text: "This is a toast message", duration: 5000, callback: function(){} })
More configuration options.
myToast = Toastify({ // On-click destination destination: null, // Open destination in new window newWindow: false, // Show toast close icon close: false, // Toast position - top or bottom gravity: 'bottom', // Toast position - left or right positionLeft: false, position: 'left', // Avatar avatar: "", // Additional classes for the toast classeName: "" // Prevents dismissing of toast on hover stopOnFocus: true, // Toast offset offset: { x: 0, y: 0 }, // Toggle the default behavior of escaping HTML markup escapeMarkup: true, // custom CSS styles here style: {}, // set the order in which toasts are stacked in page oldestFirst: true,
})
Changelog:
v1.12.0 (07/21/2021)
- Accessibility fix: Support aria-live for the toast
- Accessibility fix: Add aria-label for close icon
v1.11.2 (10/07/2021)
- Bugfix: Style Options: backgroundColor not working
- Bugfix: ShadowRoot is undefined in older browsers
v1.11.1 (07/15/2021)
- Bugfix: IE11 support broke since style option
v1.11.0 (04/25/2021)
- New property oldestFirst allows to set the order of adding new toasts to page
v1.10.0 (03/26/2021)
- selector now supports a DOM Node, along with ID string
- New property – escapeMarkup – Toggle the default behavior of escaping HTML markup
- New property – style – Use the HTML DOM Style properties to add any style directly to toast
- Adds toastify-es.js, to be used from node_modules until there are no compatibility issues
- backgroundColor is deprecated. Use style.background instead
v1.9.3 (10/09/2020)
- Offset IE11 compatibility
v1.9.2 (09/25/2020)
- Bugfix: Max width problem for firefox browser
v1.9.1 (08/14/2020)
- Add support for providing toast offset
- Bugfix: Avatar positioning based on toast position
v1.9.0 (07/23/2020)
- Add support for providing toast offset
v1.8.0 (05/30/2020)
- Add option to provide a node instead of text
v1.7.0 (03/02/2020)
- To be able to set stopOnFocus for toasts without close icon
- Bugfix: duration can be infinite by setting as 0
- Bugfix: Prevent errors when parent node is removed from DOM while using frameworks
- Bugfix: IE 9/10 compatibility fix
v1.6.2 (01/03/2020)
- Bugfix: Closing the toast when custom close icon from icon fonts are used
v1.6.1 (06/30/2019)
- Deprecation Warning: Migrating from positionLeft property to position – positionLeft is still supported but may be removed in future versions
- Property position to support center as a value along with left and right – Useful for centering toast messages in the page
- Bugfix: Disabling stopOnFocus
v1.5.0 (05/30/2019)
- Added support for persistent toast, and ability to dismiss the toast programatically.
v1.4.0 (05/12/2019)
- Manually import CSS while using as module in your modern JavaScript applications.
- Ability to pause the toast dismiss timer on hover (Using stopOnFocus property)
v1.3.2 (12/07/2018)
- Added z-index attribute.
v1.3.1 (10/09/2018)
- prevents to use !important when overwriting .toastify background color with custom CSS
- Update classnames inside media query
v1.2.1 (05/31/2018)
- Added support for Classes. Now custom classes can be added to the toast while creating it.
v1.2.0 (05/25/2018)
- Fix issue when
destination
andclose
options is used at the same time - Add support for custom classes
Thanks, works well