Press "Enter" to skip to content

Minimalistic and Responsive JavaScript Library for Show Toast Notifications | Notyf

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.

growl notification example, growl style notifications, growl notifications, growl notifications js, js alert library, javascript notification library, bootstrap notification popup, growl plugin

Features:

  • 📱 Responsive
  • 👓 Compatible with A11Y
  • 🔥 Strongly written source code (TypeScript is readily available)
  • ⚡️ 4 types of packages 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

How to make use of it:

Load the Notyf’s JavaScript and Stylesheet within the HTML doc.

<link href="dist/notyf.min.css" rel="stylesheet">
<script src="dist/notyf.min.js"></script>

Create a new Notyf instance and we’re able to go.

var notyf = new Notyf();

The JavaScript to indicate an alert notification.

notyf.alert('Alert Message');

The JavaScript to show a success notification.

notyf.confirm('Success Message');

Possible choices.

var notyf = new Notyf({

  // delay time
  // 0 = infinite duration
  duration:2000,

  // enable ripple effect
  ripple: true,

  // custom position
  position: {x:'right',y:'bottom'},

  // allow users to dismiss notifications via button
  dismissible: false, 
  
  types: [
    {
      type: 'warning', // Notification type
      duration: 2000,
      ripple: true,
      message: 'custom message'
      background: 'orange',
      className: '', extra CSS class
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'warning'
      }
    }
  ]
  
});

Dismiss all notifications.

notyf.dismissAll();

API

You can set some options when creating a Notyf instance.

new Notyf(options: INotyfOptions)

ParamTypeDefaultDetails
durationnumber2000Number of miliseconds before hiding the notification. Use 0 for infinite duration.
ripplebooleantrueWhether to show the notification with a ripple effect
positionINotyfPosition{x:'right',y:'bottom'}Viewport location where notifications are rendered
dismissibleboolean falseWhether to allow users to dismiss the notification with a button
typesINotyfNotificationOptions[]Success and error toastsArray with individual configurations for each type of toast

INotyfNotificationOptions

Configuration interface for each individual toast.

ParamTypeDetails
typestringNotification type for which this configuration will be applied
classNamestringCustom class name to be set in the toast wrapper element
durationnumber2000
iconstring INotyfIcon falseEither a string with HTML markup, an object with the properties of the icon, or ‘false’ to hide the icon
backgroundstringBackground color of the toast
messagestringMessage to be rendered inside of the toast. Becomes the default message when used in the global config.
ripplebooleanWhether or not to render the ripple at revealing
dismissiblebooleanWhether to allow users to dismiss the notification with a button

Growl Style Alert Notification Library, Notyf Plugin/Github


See Demo And Download

Official Website(caroso1222): Click Here

This superior jQuery/javascript plugin is developed by caroso1222. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *