2.0.0 • Published 2 years ago
react-alert-system v2.0.0
react-alert-system
Simple javascript library that manages alerts using reactJS. It provides a default ui for the alerts but you can customize it by providing a custom component.
Installation
- Install it by running
npm i --save react-alert-systemoryarn add react-alert-system
Docs
The library uses Javascript custom events, React Portals and React's hooks. It requires React and 💅🏾 styled-components libraries.
1. Instantiate the Alert Manager component
This library provides a specific component named AlertManager. This component is the responsible to get the existing DOM element, or create it in case it does not exist, from where the alert elements will be rendered.
It is ready to receive the following properties:
| Prop | Type | Description |
|---|---|---|
| portalId | String | The id of the DOM element to use as a root element of the alerts |
| position | AlertPosition(BottomLeft by default) | The screen position of the alerts |
| maxAlerts | Number(15 by default) | Maximum number of alerts to be rendered at the same time |
| AlertComponent | React Component | Custom component that will represent the UI of the alert (if it is not defined it will use a default one) |
| zIndex | Number(1 by default) | Customize the z-order of the alerts to overlap the rest of the elements. |
2. Handling alerts
You can create an alert from the AlertsEventHandler class provided. It has some static methods allowing you to perform the following actions:
add (creates an alert):
| Parameters | Type | Description |
|---|---|---|
alert | Alert | Object the alert properties |
remove (removes an existing alert):
| Parameters | Type | Description |
|---|---|---|
| id | Number | Identifier of the alert |
Types
AlertType:
| Type | Description |
|---|---|
| enum | Success, Error, Warning, Info |
AlertPosition:
| Type | Description |
|---|---|
| enum | BottomLeft, BottomRight, TopLeft, TopRight |
Alert:
| Field | Type | Description |
|---|---|---|
id | string | Identifier of the alert |
duration | Number | How much time will be displayed the alert(5000 by default) |
preventDuplicated | Boolean | Allow adding alerts with the same id(false by default) |
type | AlertType (Info by default) | Defines the type of the alert, it will be passed to the alert component |
payload | Object | An object with all the custom data to be used from the UI alert component.When using the default alert component, it expects to receive a title and an optional description fields |
Example:
Check out the storybook or this code example:
import {
AlertManager,
AlertPosition,
AlertType,
AlertsEventHandler,
} from "react-alert-system";
import CustomAlert from "../components/custom-alert";
const Component = () => {
useEffect(() => {
AlertsEventHandler.add({
id: "id",
preventDuplicated: false,
duration: 5000,
payload: {
title: "Title example",
description: "Description of the example",
},
type: AlertType.Warning,
});
}, []);
return (
<div>
<p>This is an example</p>
<AlertManager
portalId="alerts-portal"
maxAlerts={4}
position={AlertPosition.TopLeft}
AlertComponent={CustomAlert}
/>
</div>
);
};