React.js Notyf Library Example to Show Alert Notification Messages in Browser Using Javascript

 

 

npx create-react-app alertdemo

 

 

cd alertdemo

 

 

npm i notyf

 

 

Notyf is a minimalistic JavaScript library for toast notifications. It’s responsive, A11Y compatible, dependency-free and tiny (~3KB). Easy

integration with React, Angular, Aurelia, Vue, and Svelte.

 

 

Features

 

 

  • 📱 Responsive
  • 👓 A11Y compatible
  • 🔥 Strongly typed codebase (TypeScript Typings readily available)
  • ⚡️ 4 types of bundles exposed: ES6, CommonJS, UMD, and IIFE (for vanilla, framework-free usage).
  • 🎯 End-to-end testing with Cypress
  • 🎸 Easily plugable to modern frameworks. Recipes available to integrate with React, Angular, Aurelia, Vue, and Svelte.
  • ✨ Optional ripple-like fancy revealing effect
  • 😈 Simple but highly extensible API. Create your own toast types and customize them.
  • 🎃 Support to render custom HTML content within the toasts
  • 🐣 Tiny footprint (<3K gzipped)
  • 👴🏽 Works on IE11

 

 

Installation

npm i notyf

 

 

Usage

 

 

In Browser

 

 

 

 

Basic Alert Messages in Javascript

 

 

 

 

Examples

 

Global configuration

The following example configures Notyf with the following settings:

  • 1s duration
  • Render notifications in the top-right corner
  • New custom notification called ‘warning’ with a ligature material icon
  • Error notification with custom duration, color and dismiss button

 

 

 

 

Custom toast type

 

 

 

 

 

FULL EXAMPLE IN REACT

 

 

App.js

 

 

 

 

Leave a Reply