Notyf is a minimalistic JavaScript library for toast notifications. It’s responsive, A11Y compatible, dependency-free, and small in size (~3KB). Easy integration with React, Angular, Aurelia, Vue, and Svelte.
Features:
Responsive
Compatible with A11Y
Strongly written source code (TypeScript is readily available)
4 types of packages were exposed: ES6, CommonJS, UMD, and IIFE (for vanilla use without framework).
Comprehensive testing with Cypress
Easily pluggable into modern frameworks. Recipes are available for integration with React, Angular, Aurelia, Vue, and Svelte.
Fancy ripple-like detection effect
Simple but highly extensible API. Create and customize your own toasts.
Support for rendering custom HTML content inside the toast
Small footprint (<3K compressed)
Works on IE11
Must Read: Pure Javascript Toast Notifications Message Library | Buzz Notify
How to make use of it:
Installation:
npm i notyf
Usage:
<html>
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
</head>
<body>
...
<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
</body>
</html>// Create an instance of Notyf
var notyf = new Notyf();
// Display an error notification
notyf.error('You must fill out the form before moving forward');
// Display a success notification
notyf.success('Your changes have been successfully saved!');API
You can set some options when creating a Notyf instance.
new Notyf(options: INotyfOptions)
Must Read: 🥖 A Simple and Flexible Stacking Toast Style Notifications In Vue.js
| Param | Type | Default | Details |
|---|---|---|---|
| duration | number | 2000 | Number of milliseconds before hiding the notification. Use 0 for an infinite duration. |
| ripple | boolean | true | Whether to show the notification with a ripple effect |
| position | INotyfPosition | {x:'right',y:'bottom'} | Viewport location where notifications are rendered |
| dismissible | boolean | false | Whether to allow users to dismiss the notification with a button |
| types | INotyfNotificationOptions[] | Success and error toasts | Array with individual configurations for each type of toast |
Interfaces
INotyfPosition
Viewport location where notifications are rendered.
| Param | Type | Details |
|---|---|---|
| x | left | center | right | x-position |
| y | top | center | bottom | y-position |
INotyfNotificationOptions
Configuration interface for each individual toast.
Must Read: Create Toaster Notifications with a Few Lines of Code | ToasterJS
| Param | Type | Details |
|---|---|---|
| type | string | Notification type for which this configuration will be applied |
| className | string | Custom class name to be set in the toast wrapper element |
| duration | number | 2000 |
| icon | string INotyfIcon false | Either a string with HTML markup, an object with the properties of the icon, or ‘false’ to hide the icon |
| background | string | The background color of the toast |
| message | string | Message to be rendered inside of the toast. Becomes the default message when used in the global config. |
| ripple | boolean | Whether or not to render the ripple at revealing |
| dismissible | boolean | Whether to allow users to dismiss the notification with a button |
INotyfIcon
Icon configuration
| Param | Type | Details |
|---|---|---|
| className | string | Custom class name to be set in the icon element |
| tagName | string | HTML5 tag used to render the icon |
| text | string | Inner text rendered within the icon (useful when using ligature icons) |
| color | string | Icon color. It must be a valid CSS color value. Defaults to the background color. |
See Also –
Jquery Plugin for Animated and Customizable Alert Notifications | Nice Toast JS
Programmatic Toasts for Nuxt.js Based On Tailwind CSS
Simple and Easy Toast Notification Popup With JavaScript
See Demo And Download
Official Website(caroso1222): Click Here
This superior jQuery/javascript plugin is developed by caroso1222. For extra Advanced Usage, please go to the official website.
