@nerd-coder/react-notifications

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.

• The first is the content of the notification, which can be any renderable Node.
• 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'