@y-fe/nu-toast-reactdeprecated

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

Usage no npm install needed!

<script type="module">
  import yFeNuToastReact from 'https://cdn.skypack.dev/@y-fe/nu-toast-react';
</script>

README

nu-toast-react

npm package

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

@y-fe/nu-toast-react 本身不会输出任何样式。

怎么用?

npm i @y-fe/nu-toast-react 

or

yarn add @y-fe/nu-toast-react

二次封装

import NuToast from "@y-fe/nu-toast-react";
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 "@y-fe/nu-toast-react";

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 显示的时间

NuToast 采用 react-transition-group/css-transition 作为CSS动画解决方案,所有除了以上自定义的 API 之外,还会直接将 css-transition 所有的属性都移接到 NuToast 上。

  appear = true,
  unmountOnExit = true,
  timeout = {
    appear: 0,
    enter: 300,  // 进入的时候 transition 动画时长
    exit: 300,   // 消失的时候 transition 动画时长
  },
  classNames = {
    appear: '',
    appearActive: '_open',
    appearDone: '_open',
    enter: '_open',
    enterActive: '_open',
    enterDone: '_open',
    exit: '',
    exitActive: '',
    exitDone: '',
  },

因为 css-transition 还是有一定的上手成本,这边为了方便使用直接设定了如上的默认值。

简单的说,你想自定义动画 基于 .nu_toast._open 选择器就可以了。

.nu_toast{
    transition: transform 300ms;
    transform: translateY(20px);    
}

.nu_toast._open{
    transform: translateY(0); 
}

NuToast.setDefault Api

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

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