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

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

# useNotificationDispatch

The `useNotificationDispatch` hook returns the `Dispatch` method from React to handle updates to `NotificationProvider` state.

You can dispatch an action using the returned dispatch method. The `Action` interface defines the type and payload of action.

### Action Interface

```javascript
interface Action {
  type: ActionType;
  payload?: any;
};

enum ActionType {
  ADD,
  REMOVE,
  REMOVE_ALL,
};
```

### Return Value

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

## Importing

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

## Usage

The hook depends on the `NotificationProvider` being rendered.

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

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

const AddNotificationButton = () => {
  const dispatch = useNotificationDispatch();

  const payload: any = {
    severity: Severity.INFO,
    message: 'Information',
  };

  const addNotification = (e: any) => {
    dispatch({
      type: ActionType.ADD,
      payload: payload,
    });
  };

  return <button onClick={addNotification}>{label}</button>;
};
```

### Dependencies

- `NotificationProvider`