npm package: @nerd-coder/react-notifications
Description: React Notifications
Author: toanzzz
Latest version: 1.1.0

# React Notifications

Just another notification system for React.

The style is ~~stolen~~ heavily inspired by [react-toast-notifications](https://jossmac.github.io/react-toast-notifications) by [Joss Mackison](https://github.com/jossmac)

### Install

```bash
npm i @nerd-coder/react-notifications
```

### Use

Wrap your app in the `NotificationProvider`, which provides context for the `useNotification` descendants.

```jsx
import React, { useCallback } from 'react'
import { render } from 'react-dom'
import { useNotification, NotificationProvider } from '@nerd-coder/react-notifications'

const HelloComponent = ({ name }) => {
  const { notify } = useNotification()

  return <button onClick={() => notify(`Hello ${name}!`)}>Click me</button>
}

const App = () => (
  <NotificationProvider>
    <HelloComponent name='World' />
  </NotificationProvider>
)

render(<App />, document.getElementById('root'))
```

## NotificationProvider Props

| Property           | Type                                                                                       | Description                                                           |
|--------------------|--------------------------------------------------------------------------------------------|-----------------------------------------------------------------------|
| placement          | `'top-left'` \| `'top-center'` \| `'top-right'` \| `'bottom-left'` \| `'bottom-center'` \| `'bottom-right'` | Notification placement, default is `bottom-right`                     |
| autoDismiss        | boolean?                                                                                   | Auto dismiss the notification after timeout. Default is `true`        |
| autoDismissTimeout | number?                                                                                    | Work conjunction with `autoDissmiss`. Default is `5000`ms (5 seconds) |
| animationTimeOut   | number?                                                                                    | Timing for enter & exit animation. Default is `300`ms                 |
| Tag                | React.ComponentType?                                                                       | Notification Component to render                                      |
| onAdd              | (id: string) => void                                                                       | Event handler, will be passed notification's id as first parameter    |
| onAdded            | (id: string) => void                                                                       | Event handler, will be passed notification's id as first parameter    |
| onRemove           | (id: string) => void                                                                       | Event handler, will be passed notification's id as first parameter    |
| onRemoved          | (id: string) => void                                                                       | Event handler, will be passed notification's id as first parameter    |

## Notify & Dismiss

The `notify` and `dimiss` methods on `useNotification` have two arguments.

1. The first is the content of the notification, which can be any renderable `Node`.
2. The second is the `Options` object, which accept the same props as `NotificationProvider`, and an additional prop `appearance` having value being one of `'info' | 'warning' | 'success' | 'error'`