Toast

npm package	npm downloads	github

React toast 组件

怎么用？

yarn add @_nu/react-toast

二次封装

import NuToast from "@_nu/react-toast";
import "./style.css";

const Toast = NuToast.setDefault({
    // 默认值就是这三个，可以自定义
    status:['danger','warning','success'],
    showTime: 3000
});

export default Toast;
export { NuToast };

NuToast 有两种使用方式。

使用「基于 DOM 」

import React from 'react';
import { NuToast } from "../../components/Toast";

function PageToast() {
    return (
        <div>
            <NuToast open showTime={3000} status="danger">hello!</NuToast>
        </div>
    );
}

export default PageToast;

第一种方式是直接采用 Dom 的方式。 NuToast 会在 Dom 对象创建的时候显示，然后3000 毫秒之后消失。这种方式比较适合在一进入页面的就需要显示一个 toast 的时候使用。

使用「基于 Function 」

import React, { Component } from "react";
import Toast from "./components/Toast";

function App(){
  render() {
    return (
      <div className={`tac`}>
        <button type="button" onClick={()=>{
            Toast('toast default');
        }}>
          显示Toast
        </button>
        <button type="button" onClick={()=>{
            Toast.danger('toast danger');
        }}>
          显示Toast danger
        </button>
        <button type="button" onClick={()=>{
            Toast.success('toast danger');
        }}>
          显示Toast danger
        </button>
        <button type="button" onClick={()=>{
            Toast.warning('toast warning');
        }}>
          显示Toast danger
        </button>
      </div>
    );
  }
};

export default App;

很多时候 toast 都是在某项操作之后才触发。

NuToast.setDefault 可以帮助大家在初始化的快速的创建自己的 Toast 系统。

通常我们的全局的 Toast 都是一样的 UI 逻辑，所以只需要在初始化的时候创建即可。

NuToast.setDefault 默认有 ['danger','warning','success'] 三个状态，当然你可以基于自己的业务创建属于自己的 Toast 系统。

import NuToast from "@_nu/react-toast";

const Toast = NuToast.setDefault({
    status:['myToast'],
    showTime: 3000
});

function App(){
  render() {
    return (
      <div>
        <button type="button" onClick={()=>{
            Toast('toast default');
        }}>
          显示Toast
        </button>

        <button type="button" onClick={()=>{
            Toast.myToast('toast myToast');
        }}>
          显示Toast
        </button>
      </div>
    );
  }
};

export default App;

NuToast Api

props	类型	默认值	功能
children *	node	null	内容元素
className *	string	''	className
status	string	-	toast 的状态
showTime	number	true	toast 显示的时间

动效

  appear = true,
  unmountOnExit = true,
  timeout = 300,
  classNames = {
    appearActive: '_open',
    appearDone: '_open',
    enter: '_open',
    enterActive: '_open',
    enterDone: '_open',
  },

NuToast 采用 react-transition-group/css-transition 作为 CSS 动画解决方案，所有除了以上自定义的 API 之外，还会直接将 css-transition 所有的属性都移接到 NuToast 上。因为 css-transition 还是有一定的上手成本，这边为了方便使用直接设定了如上的默认值。在实际开发的时候只需要围绕着 .nu_toast._open 这个选择器开发即可。

`NuToast.setDefault` Api

props	类型	默认值	功能
status	array	`['danger', 'warning', 'success']`	弹窗默认状态

对于其它的 props 都会直接在创建的时候透传到 NuToast 上。

如何自定义样式?

nu-css-toast

# Toast

# 怎么用？

# 二次封装

# 使用 「 基于 DOM 」

# 使用 「 基于 Function 」

# NuToast Api

# 动效

# NuToast.setDefault Api

# 如何自定义样式?