@flrfinance/react-enotify NPM

React-Enotify

React-Enotify is a lightweight, customizable notification library for React applications. It provides an easy-to-use hook and context for managing notifications, along with smooth animations powered by React Spring. With React-Enotify, you can quickly integrate and manage notification pop-ups in your application, enhancing user experience and responsiveness.

Features

Display notifications with customizable styles
Dismiss notifications after a certain amount of time
Add primary and secondary actions to notifications
Use multiple notification types (success, warning, info, error, and loading)

Installation

To install react-enotify, you can use npm:

npm install --save @flrfinance/react-enotify

Or yarn:

yarn add @flrfinance/react-enotify

Usage

To use the Notifications module, follow these steps:

Wrap your application with the NotificationsProvider component:

import { NotificationsProvider } from "@flrfinance/react-enotify";

function App() {
  return (
    <NotificationsProvider>
      <div>...Your app goes here...</div>
    </NotificationsProvider>
  );
}

Use the useNotifications hook in the component where you want to add, remove or manage notifications:

import { useNotifications } from "@flrfinance/react-enotify";

function MyComponent() {
  const { addNotification, removeNotification } = useNotifications();

  const handleClick = () => {
    addNotification({
      id: "my-notification",
      title: "Notification title",
      description: "Notification description",
      status: "success", // success, info, warning, error
      dismissible: true, // optional
      dismissAfter: 3000, // optional, in milliseconds
      primaryAction: {
        label: "Ok",
        onClick: () => {
          removeNotification("my-notification");
        },
      }, // optional
      secondaryAction: {
        label: "Cancel",
        onClick: () => {
          removeNotification("my-notification");
        },
      }, // optional
    });
  };

  return <button onClick={handleClick}>Add Notification</button>;
}

The addNotification method expects a notification object with the following properties:

id (string, required): unique identifier for the notification
title (string, required): title of the notification
description (string, required): description of the notification
status (string, required): status of the notification, can be one of: success, info, warning or error
dismissible (boolean, optional): whether the notification can be dismissed or not (defaults to false)
dismissAfter (number, optional): the time in milliseconds after which the notification should be automatically dismissed (defaults to null)
primaryAction (object, optional): an object with label and onClick properties defining a primary action for the notification (defaults to null)
secondaryAction (object, optional): an object with label and onClick properties defining a secondary action for the notification (defaults to null)

The removeNotification method expects the id of the notification to be removed as a parameter.

Customization

You can customize the appearance of notifications by overriding the default styles. Here's an example:

// Override the background color of the success notifications
.r-enotification.success {
  background-color: #b2e2b2;
}

// Override the background color of the error notifications
.r-enotification.error {
  background-color: #e2b2b2;
}