React-custom-toast NPM

react-custom-toast

基于 react 的 toast 组件。可以完全的自定义样式。并提供了内置动画与控制方法demo

react-custom-toast demo

使用 npm 安装

npm install react-custom-toast --save

使用 yarn 安装

yarn add react-custom-toast

添加 ToastContainer 组件至 render 中

import { ToastContainer } from 'react-custom-toast'

ReactDom.render(<ToastContainer />, document.body)

然后，开始使用 toast

import { Toast } from 'react-custom-toast'

Toast.open('hello,world')

参数	类型	默认值	描述
component	`JSX.FunctionComponent`	`undefinded`	自定义组件
clickClose	`boolean`	`false`	点击 toast 即关闭

方法

Toast(msg: string, opt: ToastOption) // 打开默认提示

Toast.open(msg: string, opt: ToastOption) // 打开无状态提示

Toast.info(msg: string, opt: ToastOption) // 打开提示

Toast.info(msg: string, opt: ToastOption) // 打开成功提示

Toast.error(msg: string, opt: ToastOption) // 打开错误提示

Toast.warning(msg: string, opt: ToastOption) // 打开警告提示

Toast.remove(id: ToastId) // 移除某个 toast

参数	类型	默认值	描述
id	string\|number	随机	设置 toast id
type	`string`	''	提示类型('info' \| 'success' \| 'error' \| 'warning')
placement	`string`	`topLeft`	toast 方位（'topLeft' \| 'topRight' \| 'topCenter' \| 'bottomLeft' \| 'bottomRight' \| 'bottomCenter'）
duration	`number`	2000	提示持续时间
delay	`number`	0	提示出现延时
animateDuration	`number`	300	提示动画时间
animateName	`string`	`slideX`	提示动画效果('slideX' \| 'slideY')