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-notifications

Use

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.

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'