@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.

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'