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

<Meta title="UI Hooks/Notification/useNotificationState" />

# useNotificationState

The `useNotificationState` hook returns the state for developing `NotificationGroup` like component.

### Return Value

```javascript
{
 notifications: [{
  id?: string;
  severity?: Severity;
  message?: string;
  autoClose?: boolean;
  autoCloseDelay?: number;
  replaceAll?: boolean;
 }]
}
```

## Importing

```javascript
import { useNotificationState } from 'amazon-chime-sdk-component-library-react';
```

## Usage

The hook depends on the `NotificationProvider` being rendered.

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

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

const MyChild = () => {

  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 (
    <NotificationGroup>
      {notificationItems}
    </NotificationGroup>
  )
}
```

Note: Check `ActionType` information in `useNotificationDispatch` [documentation](/docs/ui-hooks-notification-usenotificationdispatch--page).

### Dependencies

- `NotificationProvider`