# Notification Bar 📝

The notification bar provides specific notification to a page area contextually.

## Setup

The steps below provide a high level way to setup a Notification Bar.-

- Wrap a certain page area in a `<NotificationBarProvider>`.
- Add a `<NotificationBar>` component where it should be placed as a child of a `<NotificationBarProvider>`.
- Add a `<NotificationBarConsumer>` component which can be used to instantiate the `<NotificationBar />` component.

## Code Setup

```javascript
<NotificationBarProvider>
  <NotificationBar />
  <NotificationBarConsumer>
    {({ setNotification }) => {
      return (
        <button onClick={() => setNotification('foo bar')}>
          Make this Notification Bar happen!
        </button>
      )
    }}
  </NotificationBarConsumer>
</NotificationBarProvider>
```

[Code Example](https://codesandbox.io/s/gracious-star-fh6ll)