React Notifications
Just another notification system for React.
The style is stolen heavily inspired by react-toast-notifications by Joss Mackison
Install
npm i @nerd-coder/react-notificationsUse
Wrap your app in the NotificationProvider, which provides context for the useNotification descendants.
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 5000ms (5 seconds) |
| animationTimeOut | number? | Timing for enter & exit animation. Default is 300ms |
| 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.
- The first is the content of the notification, which can be any renderable
Node. - The second is the
Optionsobject, which accept the same props asNotificationProvider, and an additional propappearancehaving value being one of'info' | 'warning' | 'success' | 'error'