# Banner 🏁

The Banner Component is added to the top of applications. It is used for alerting customers of important business information.

## Params

The Banner consumes data, as props for information that defines it's initial state.

### Current `API` (props)

Listed below are the current props expected or supported by the banner.

- **name:** string,
- **children;** (props: ChildrenProps) => React.ReactNode

As the banner component provides render props, information is passed do to the `<banner>` children.

Listed below are the children supported props.

- **name:** string

## Usage

The code snippet below provides a general representation of how the Banner component works.

```javascript
<Banner name="test-banner">
  {({ name }) => {
    ;<p>Here, more can be provided + the banner name which is {name}.</p>
  }}
</Banner>
```

## State Management

The banner's state, visible or not visible, is maintained by cookies with `js-cookie`, read about `js-cookie` [here](https://github.com/js-cookie/js-cookie).
JS Cookie sets a cookie with a unique name which is why each banner must have a unique name.
Once a banner is closed, it is removed from the dom. To get the banner back, browser cookies must be cleared.

---

JS Cookie was choosen because of it's clean API and support.
Other options include React-Cookie which can remove more cookie context but what is written is the same.