Notification

The Notification component delivers real-time messages or alerts to users, providing important updates, feedback, or information within an application. Notifications can be automatic or can be triggered based on some actions that the user performed.

Quick Start

Add the Notifications provider at the top of your application so that it does not conflict with other absolutely positioned DOM elements.

import { Notifications } from 'reablocks';
 
const App = () => {
  return (
    <div className='app-container'>
      <Notifications>
        <Application />
       </Notifications>
    </div>
  );
};

Use useNotification hook to access notify and clearAllNotifications functions

import { useNotification, Button } from 'reablocks';
 
const Component = () => {
   const { notify, clearAllNotifications } = useNotification();
  return (
    <>
      <Button onClick={() => notify('Some text')}>
        Test
      </Button>
      <Button onClick={() => clearAllNotifications()}>
         Clear
      </Button>
    </>
  );
};

You can also pass in options when calling the notify function to customize the notification.

const options: NotificationOptions = {
  body: "This is the body of the notification",
  timeout: 5000,
}
 
notify("This is a notification", options)

The API for the notify function is as follows:

type NotificationVariants =
  | 'default'
  | 'success'
  | 'warning'
  | 'error'
  | 'info';
 
interface NotificationOptions {
  title?: string | React.JSX.Element | React.JSX.Element[];
  body?: string | React.JSX.Element | React.JSX.Element[];
  timeout?: number;
  showClose?: boolean;
  variant?: NotificationVariants;
  className?: string;
  icon?: string | React.JSX.Element | React.JSX.Element[];
  action?: string | React.JSX.Element | React.JSX.Element[];
}

Examples

Notification for interface essential scenarios

Custom styled notitications

Notifications with title and body

Theme

This component uses the following default theme:

root{}(3 keys)

Learn more about how to customize in the Theme documentation.

API

Prop	Description	Default
`limit`	`number`	`10`
`timeout`	`number`	`4000`
`showClose`	`boolean`	`true`
`preventFlooding`	`boolean`	`true`
`className`	`string`
`components`	`{ default?: JSXElementConstructor<NotificationComponentProps>; success?: JSXElementConstructor<NotificationComponentProps>; warning?: JSXElementConstructor<...>; error?: JSXElementConstructor<...>; info?: JSXElementConstructor<...>; }`
`icons`	`{ default?: string \| Element \| Element[]; success?: string \| Element \| Element[]; warning?: string \| Element \| Element[]; error?: string \| ... 1 more ... \| Element[]; info?: string \| ... 1 more ... \| Element[]; }`	`{ default: <InfoIcon />, success: <CheckCircleIcon />, warning: <WarningIcon />, error: <ErrorCircleIcon />, info: <InfoIcon /> }`
`theme`	`NotificationTheme`

Menu Popover