react-notificantion-toast

React + JavaScript + Vite

• react-notificantion-toast

React Notificantion Toast with Progressbar.

A brief description of my package and its key features.

Installation

You can install this package via npm. Run the following command:

• Using Node Package Manager (NPM)

npm i react-notificantion-toast

• Using Yarn

yarn add react-notificantion-toast

• Using PNPM

pnpm install react-notificantion-toast

How to use in react.js

• First import useNotificantion hook from react-notificantion-toast your npm library

• Then initialize it and set a duration of this notificantion visibility for milliseconds, if you're not initialized it such as useNotificantionToast(50000), then it take it's default value which are 5000 like 5000ms or 5 seconds.

• Or you can use a .env's local variable for initialized this notificantion toast duration's value.

• When you call const [active, Toast] = useNotificantionToast() this function you got two returning variable which one notificantion toast activator function and other one is notificantion toast component which receive tow attributes of parameter type & text this two are takes definitely a string value.

• The type is receive some specific type of string which are indicate this notificantion's type.

• And the text receive an string which are the main message's text!

• All the message types are available on that present version are ----

["success", "danger", "warning", "primary", "download", "normal", "info", "dark"]

VITE_NOTIFICANTION_TOAST_DURATION = 5000 # 5s

import useNotificantionToast from 'react-notificantion-toast';
export default function App() {
  const [active, Toast] = useNotificantionToast();

  return (
    <div>
      <div>
        <button
          onClick={function () {
            active((prevState) => !prevState);
          }}
          className="click"
        >
          click
        </button>
      </div>
      <div>
        <Toast
          type="success"
          text="Hi! I am from notificantion toast"
        />
      </div>
    </div>
  );
}

Pleasure:

• I hope you are enjoy to use this library.
• Please give an github star, If it's really helpful for you!
• Support me on SYED AMIR ALI
• Thanks in advance & stay safe and keep safe.
• NPM