Show Alert Notification Messages Using React.js Notyf Library

npx create-react-app alertdemo

cd alertdemo

npm i notyf

Notyf is a minimalistic JavaScript library for toast notifications. It is responsive, A11Y compatible, dependency-free, and has a very lightweight footprint (~3KB). Notyf can be easily integrated 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

Usage in Browser

<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>

Basic Alert Messages in JavaScript

// 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!');

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

const notyf = new Notyf({
  duration: 1000,
  position: {
    x: 'right',
    y: 'top',
  },
  types: [
    {
      type: 'warning',
      background: 'orange',
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'warning'
      }
    },
    {
      type: 'error',
      background: 'indianred',
      duration: 2000,
      dismissible: true
    }
  ]
});

Custom toast type

const notyf = new Notyf({
  types: [
    {
      type: 'info',
      background: 'blue',
      icon: false
    }
  ]
});

notyf.open({
  type: 'info',
  message: 'Send us <b>an email</b> to get support'
});

Full Source Code to Show Alert Notification Messages Using React.js Notyf Library

App.js

import React from 'react'

import { Notyf } from 'notyf';
import 'notyf/notyf.min.css'; // for React, Vue and Svelte

function App() {


  const notyf = new Notyf();

  const successAlert = () => {

    notyf.success("This is a basic Alert")
   
  }

  const errorAlert = () => {
    let error = new Notyf({
      duration:1000,
      position:{
        x:'right',
        y:'top'
      },
      dismissible:true
    })
    error.error("This is an error Alert")
  }

  const customAlert = () => {
    const notyf = new Notyf({
      types: [
        {
          type: 'custom',
          background: 'blue',
          icon: false
        }
      ]
    });
    
    notyf.open({
      type: 'custom',
      message: 'Send us <b>an email</b> to get support'
    });
  }
  return (
    <div>
      <button onClick={successAlert}>Success Alert</button>
      <button onClick={errorAlert}>Error Alert</button>
      <button onClick={customAlert}>Custom Toast Alert</button>
    </div>
  )
}

export default App

Screenshot

Show Alert Notification Messages Using React.js Notyf Library

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.