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

1. Install it by running npm i --save react-alert-system or yarn 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>
  );
};