react-atom-toast

Tiny & Headless toast for React

Install

1npm i react-atom-toast

Demo

Online

Usage

Basic

1import { toast } from 'react-atom-toast'
2
3// toast is headless and styleless, you'd customize it yourself
4toast.setDefaultOptions({
5  className: 'bg-red p-2 rounded',
6})
7
8toast.open('Hello, world!')

Transition

Transition is powered by react-transition-preset.

1import { toast } from 'react-atom-toast'
2
3toast({
4  content: 'Hello, world!',
5  transition: 'fade-up',
6})

Single Instance

1import { toast } from 'react-atom-toast'
2
3toast({
4  content: 'Hello, world!',
5  maxCount: 1,
6})

Options

duration

• Type: number
• Default: 2000

The duration of the toast.

className

• Type: string

The class name of the toast.

react-atom-toast is headless, you need to style it yourself.

1import { toast } from 'react-atom-toast'
2
3toast.setDefaultOptions({
4  className: 'bg-black bg-opacity-90 p-2 rounded',
5})

transition

• Type: PresetTransitionName | { name?: PresetTransitionName duration?: number exitDuration?: number }
• Default: fade-up

The transition of the toast. Read react-transition-preset to learn more.

pauseOnHover

• Type: boolean
• Default: true

Prevent the toast from disappearing when hovering.

maxCount

• Type: number
• Default: 3

The maximum number of toasts that can be displayed at the same time.

If set to 1, the new toast will replace the old one.

gap

• Type: number
• Default: 16

The gap between toasts.

render

• Type: (children: ReactNode) => ReactNode

Enhance the toast rendering. Useful for react context.