https://github.com/hemengke1997/react-atom-toast
Tiny & Headless toast for React
https://github.com/hemengke1997/react-atom-toast
Last synced: about 2 months ago
JSON representation
Tiny & Headless toast for React
- Host: GitHub
- URL: https://github.com/hemengke1997/react-atom-toast
- Owner: hemengke1997
- License: mit
- Created: 2024-10-14T07:00:12.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-04-07T14:26:28.000Z (2 months ago)
- Last Synced: 2025-04-19T03:59:01.021Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://hemengke1997.github.io/react-atom-toast/
- Size: 2.23 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-atom-toast
> Tiny & Headless toast for React
## Install
```bash
npm i react-atom-toast
```
## Demo
[Online](https://hemengke1997.github.io/react-atom-toast/)
## Usage
### Basic
```tsx
import { toast } from 'react-atom-toast'
// toast is headless and styleless, you'd customize it yourself
toast.setDefaultOptions({
className: 'bg-red p-2 rounded',
})
toast.open('Hello, world!')
```
### Transition
Transition is powered by [react-transition-preset](https://github.com/hemengke1997/react-transition-preset).
```tsx
import { toast } from 'react-atom-toast'
toast({
content: 'Hello, world!',
transition: 'fade-up',
})
```
### Single Instance
```tsx
import { toast } from 'react-atom-toast'
toast({
content: 'Hello, world!',
maxCount: 1,
})
```
## Options
### duration (s)
- **Type:** `number`
- **Default:** `2`
The duration of the toast (s).
### className
- **Type:** `string`
The class name of the toast.
react-atom-toast is headless, you need to style it yourself.
```tsx
import { toast } from 'react-atom-toast'
toast.setDefaultOptions({
className: 'bg-black bg-opacity-90 p-2 rounded',
})
```
### transition
- **Type:** `PresetTransitionName
| {
name?: PresetTransitionName
duration?: number
exitDuration?: number
}`
- **Default:** `fade`
The transition of the toast. Read [react-transition-preset](https://github.com/hemengke1997/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.