npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@_nu/react-toast

v0.1.7

Published

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

Downloads

22

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