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:

1npm install --save @flrfinance/react-enotify

Or yarn:

1yarn add @flrfinance/react-enotify

Usage

To use the Notifications module, follow these steps:

1. Wrap your application with the NotificationsProvider component:

1import { NotificationsProvider } from "@flrfinance/react-enotify";
2
3function App() {
4  return (
5    <NotificationsProvider>
6      <div>...Your app goes here...</div>
7    </NotificationsProvider>
8  );
9}

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

1import { useNotifications } from "@flrfinance/react-enotify";
2
3function MyComponent() {
4  const { addNotification, removeNotification } = useNotifications();
5
6  const handleClick = () => {
7    addNotification({
8      id: "my-notification",
9      title: "Notification title",
10      description: "Notification description",
11      status: "success", // success, info, warning, error
12      dismissible: true, // optional
13      dismissAfter: 3000, // optional, in milliseconds
14      primaryAction: {
15        label: "Ok",
16        onClick: () => {
17          removeNotification("my-notification");
18        },
19      }, // optional
20      secondaryAction: {
21        label: "Cancel",
22        onClick: () => {
23          removeNotification("my-notification");
24        },
25      }, // optional
26    });
27  };
28
29  return <button onClick={handleClick}>Add Notification</button>;
30}

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:

1// Override the background color of the success notifications
2.r-enotification.success {
3  background-color: #b2e2b2;
4}
5
6// Override the background color of the error notifications
7.r-enotification.error {
8  background-color: #e2b2b2;
9}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.