@_nu/react-toast

NU 「 no-ui 」 组件库系统 nu-system,toast 组件 React 实现

Usage no npm install needed!

<script type="module">
  import NuReactToast from 'https://cdn.skypack.dev/@_nu/react-toast';
</script>

README

nu-react-toast

npm package

NU 「 no-ui 」组件库系统 nu-system,Toast 组件 React 实现。

NuToast 本身不会输出任何样式。

怎么用?

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-toast