Growl Style Alert Notification Library – Notyf

Category: Javascript , Notification | April 3, 2020
Author: caroso1222
Views Total: 4,293
Official Page: Go to website
Last Update: April 3, 2020
License: MIT

Preview:

Growl Style Alert Notification Library – Notyf

Description:

Notyf is a very small and simple-to-use JavaScript library used for display growl-style alert/success notification messages on the screen. Responsive, accessible and easy to use.

How to use it:

Load the Notyf’s JavaScript and Stylesheet in the html document.

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

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

var notyf = new Notyf();

The JavaScript to show an alert notification.

notyf.alert('Alert Message');

The JavaScript to show a success notification.

notyf.confirm('Success Message');

Possible options.

var notyf = new Notyf({

  // delay time
  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();

Changelog:

v3.5.1 (04/03/2020)

  • Fixed compatibility issues with IE11.

v3.5.0 (03/31/2020)

  • Replace ‘backgroundColor’ with ‘background’.

v3.4.0 (03/28/2020)

  • Allow users to dismiss all notifications

v3.3.0 (03/27/2020)

  • Allow users to dismiss notifications via button

v3.2.0 (03/26/2020)

  • Allow custom notification positioning

v3.1.0 (10/30/2019)

  • Allow multiple class names

v3.0.0 (03/20/2019)

  • Improve a11y support with the new a11y announcer
  • Implement a more extensible, yet simple and scalable API
  • Complete up to date TypeScript typings
  • Migrate codebase to TypeScript
  • Add appropriate support for module bundlers by exposing different artifacts (ES6, CommonJS, minified IIFE)
  • Add e2e tests with Cypress
  • Move to Rollup for the build workflow
  • Rename delay for duration
  • Rename alert for error
  • Rename confirm for success
  • Remove option confirmIcon
  • Remove option alertIcon
  • Drop support for Bower

v2.0.1 (05/30/2018)

  • Add entry point for CommonJS require. Now Notyf can be imported as var Notyf = require(‘notyf’)

You Might Be Interested In:


Leave a Reply