# react-custom-toast

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

Latest version **0.1.4** (published 2019-01-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-custom-toast
pnpm add react-custom-toast
yarn add react-custom-toast
bun add react-custom-toast
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2019-01-11 |
| First published | 2019-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zhzxang |
| Maintainers | zhzxang |
| Keywords | react, notification, toast, react-component, react-custom-toast, push, message, alert |

## Links

- npm: https://www.npmjs.com/package/react-custom-toast
- Repository: https://github.com/zhzxang/react-custom-toast
- Homepage: https://github.com/zhzxang/react-custom-toast#readme
- Issues: https://github.com/zhzxang/react-custom-toast/issues
- npm.io page: https://npm.io/package/react-custom-toast

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.7.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.7.0
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.5.2

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2019-01-11
- 0.1.3 — 2019-01-08
- 0.1.2 — 2019-01-08
- 0.1.1 — 2019-01-08
- 0.1.0 — 2019-01-08
- 0.0.12 — 2019-01-07
- 0.0.11 — 2019-01-07
- 0.0.10 — 2019-01-07
- 0.0.8 — 2019-01-07
- 0.0.6 — 2019-01-04
- 0.0.5 — 2019-01-04
- 0.0.4 — 2019-01-04
- 0.0.3 — 2019-01-04
- 0.0.2 — 2019-01-04
- 0.0.1 — 2019-01-04

## README

# react-custom-toast

基于 react 的 toast 组件。可以完全的自定义样式。并提供了内置动画与控制方法[demo](https://zhzxang.github.io/demo/react-custom-toast)

![react-custom-toast demo](static/react-toast-demo.gif)

### Feature

- [ ] 添加测试
- [x] 上线 demo 网站
- [ ] 更多的内置动画效果

### 安装

> 使用 npm 安装

```
npm install react-custom-toast --save
```

> 使用 yarn 安装

```
yarn add react-custom-toast
```

### 使用

> 添加 ToastContainer 组件至 `render` 中

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

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

> 然后，开始使用 toast

```js
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

---
_Source: https://npm.io/package/react-custom-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._