react-atom-toast

轻量无头的 React Toast

安装

1npm i react-atom-toast

Demo

在线示例

使用

基础使用

1import { toast } from 'react-atom-toast'
2
3// toast默认没有样式，需要您自己添加样式
4toast.setDefaultOptions({
5  className: 'bg-red p-2 rounded',
6})
7
8toast.open('Hello, world!')

过渡动画

过渡动画由 react-transition-preset 驱动

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

单例

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

配置项

duration (s)

• Type: number
• Default: 2

toast 持续时长

className

• Type: string

样式类名

toast 是无样式的，需要您自己添加样式

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

过渡动画，配置项详情参考 react-transition-preset

pauseOnHover

• Type: boolean
• Default: true

hover时阻止toast消失

maxCount

• Type: number
• Default: 3

同时最多显示的toast数量

如果设置为 1，新的toast会替换旧的toast

gap

• Type: number
• Default: 16

toast 之间的间距，默认为 16px

render

• Type: (children: ReactNode) => ReactNode

渲染增强，通常用于react context

扩展

虽然 react-atom-toast 导出了toast实例，但是您也可以自行扩展 Toast 类，比如：

1import { Toast } from 'react-atom-toast'
2
3class MyToast extends Toast {
4  constructor() {
5    super()
6    this.setDefaultOptions({
7      className: 'bg-red p-2 rounded',
8    })
9  }
10
11  info(content: string) {
12    this.open({
13      content,
14      className: 'bg-blue p-2 rounded',
15    })
16  }
17  success(content: string) {
18    this.open({
19      content,
20      className: 'bg-green p-2 rounded',
21    })
22  }
23}