@flrfinance/react-enotify
v0.0.29
Published
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 int
Downloads
190
Readme
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 notificationtitle
(string, required): title of the notificationdescription
(string, required): description of the notificationstatus
(string, required): status of the notification, can be one of: success, info, warning or errordismissible
(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 withlabel
andonClick
properties defining a primary action for the notification (defaults to null)secondaryAction
(object, optional): an object withlabel
andonClick
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;
}
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.