react-custom-toast
基于 react 的 toast 组件。可以完全的自定义样式。并提供了内置动画与控制方法
Last updated 8 months ago by zhzxang .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-custom-toast 
SYNC missed versions from official npm registry.

react-custom-toast

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

react-custom-toast demo

Feature

  • [ ] 添加测试
  • [x] 上线 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')

参数

ToastContainer

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

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

ToastOption

参数 类型 默认值 描述
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')

License

MIT

Current Tags

  • 0.1.4                                ...           latest (8 months ago)

15 Versions

  • 0.1.4                                ...           8 months ago
  • 0.1.3                                ...           8 months ago
  • 0.1.2                                ...           8 months ago
  • 0.1.1                                ...           8 months ago
  • 0.1.0                                ...           9 months ago
  • 0.0.12                                ...           9 months ago
  • 0.0.11                                ...           9 months ago
  • 0.0.10                                ...           9 months ago
  • 0.0.8                                ...           9 months ago
  • 0.0.6                                ...           9 months ago
  • 0.0.5                                ...           9 months ago
  • 0.0.4                                ...           9 months ago
  • 0.0.3                                ...           9 months ago
  • 0.0.2                                ...           9 months ago
  • 0.0.1                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 15
Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |