Notify

Notification component and functions for React.

Demo

Basic usage

Using the Notification component:

const [notifications, setNotifications] = React.useState([]);

const createNotification = (color) =>
  setNotifications([...notifications, { color, id: notifications.length }]);

const deleteNotification = (id) =>
  setNotifications(
    notifications.filter((notification) => notification.id !== id)
  );

return (
  <>
    <button onClick={() => createNotification(Color.info)}>Info</button>
    <button onClick={() => createNotification(Color.success)}>Success</button>
    <button onClick={() => createNotification(Color.warning)}>Warning</button>
    <button onClick={() => createNotification(Color.error)}>Error</button>
    {notifications.map(({ id, color }) => (
      <Notification
        key={id}
        onDelete={() => deleteNotification(id)}
        color={color}
        autoClose={true}
      >
        {message}
      </Notification>
    ))}
  </>
);

Using notify functions:

<>
  <button onClick={() => info(message, true)}>Info</button>
  <button onClick={() => success(message, true)}>Success</button>
  <button onClick={() => warning(message, true)}>Warning</button>
  <button onClick={() => error(message, true)}>Error</button>
</>