import { Meta } from '@storybook/blocks';

<Meta title="UI Providers/NotificationProvider" />

# NotificationProvider

The `NotificationProvider` provides state and react dispatch method for building NotificationGroup like component.

## Provides

It internally uses `useReducer` hook from React to provide a state and a dispatch method to update this state.

### State

```javascript
[{
  // The uuid generated while adding the notification to the state array
  id?: string;

  // The severity of notification, Severity enum contains ERROR, SUCCESS, INFO, and WARNING
  severity?: Severity;

  // The message to display in the notification
  message?: string;

  // Whether or not the notification should be closed automatically
  autoClose?: boolean;

  // Auto close delay in milliseconds, it defaults to 6000 (6s)
  autoCloseDelay?: number;

  // Whether or not the current notification array (state) should be emptied
  replaceAll?: boolean;
}]
```

You can access the state using `useNotificationState` hook.

### Dispatch Method

```javascript
dispatch: React.Dispatch<Action>
```

You can access the dispatch method using `useNotificationDispatch` hook.

## Usage

```jsx
import React from 'react';
import {
  NotificationProvider,
  useNotificationState,
  useNotificationDispatch,
  Notification
 } from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <NotificationProvider>
    <NotificationGroup />
  </NotificationProvider>
);

const NotificationGroup = () => {

  const { notifications } = useNotificationState();
  const dispatch = useNotificationDispatch();

  const notificationItems = {notifications.map(({ id, ...rest }): any => (
    <Notification
      key={id}
      {...rest}
      onClose={() => dispatch({ type: ActionType.REMOVE, payload: id })}
    />
  ))};

  return (
    <>
      {notificationItems}
    </>
  )
}
```

**Note**: Check [useNotificationState](/docs/ui-hooks-notification-usenotificationstate--page) and [useNotificationDispatch](/docs/ui-hooks-notification-usenotificationdispatch--page) for more information.