Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@uiw/react-notify

Package Overview
Dependencies
Maintainers
1
Versions
173
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-notify

Notify component

  • 4.6.3
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Notify 消息通知

全局展示通知提醒信息。

import { Notify } from 'uiw';
// or
import Notify from '@uiw/react-notify';

基本用法

import { Button, Notify } from 'uiw';

const Demo = () => {
  return (
    <div>
      <Button
        onClick={() => {
          Notify.open({ title: '打开通知', description: '最简单的用法,4.5 秒后自动关闭,没有状态颜色图标。' });
        }}
      >
        打开通知
      </Button>
      <Button
        type="success"
        onClick={() => {
          Notify.success({ title: '成功通知', description: '最简单的用法,4.5 秒后自动关闭。' });
        }}
      >
        成功通知
      </Button>
      <Button
        type="warning"
        onClick={() => {
          Notify.warning({
            title: '警告通知',
            description: '这是一个警告通知,最简单的用法,4.5 秒后自动关闭。'
          });
        }}
      >
        警告通知
      </Button>
      <Button
        type="primary"
        onClick={() => {
          Notify.info({ title: '说明通知', description: '最简单的用法,4.5 秒后自动关闭。' });
        }}
      >
        说明通知
      </Button>
      <Button
        type="danger"
        onClick={() => {
          Notify.error({ title: '错误通知', description: '最简单的用法,4.5 秒后自动关闭。' });
        }}
      >
        错误通知
      </Button>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

弹出位置

import { MonthPicker, Button, Notify } from 'uiw';

const Demo = () => {
  return (
    <div>
      <Button
        onClick={() => {
          Notify.success({ placement: 'topLeft', title: '成功通知', description: '最简单的用法,4.5 秒后自动关闭。' });
        }}
      >
        ↖上左弹出通知
      </Button>
      <Button
        onClick={() => {
          Notify.warning({
            placement: 'topRight',
            title: '警告通知',
            description: '最简单的用法,4.5 秒后自动关闭。',
            onClose: () => {
              console.log('~~~~>')
            }
          });
        }}
      >
        ↗上右弹出通知
      </Button>
      <Button
        onClick={() => {
          Notify.info({ placement: 'bottomLeft', title: '说明通知', description: '最简单的用法,4.5 秒后自动关闭。' });
        }}
      >
        ↙下左弹出通知
      </Button>
      <Button
        onClick={() => {
          Notify.error({ placement: 'bottomRight', title: '错误通知', description: '最简单的用法,4.5 秒后自动关闭。' });
        }}
      >
        ↘下右通知
      </Button>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

弹出通知不消失

import { Button, Notify } from 'uiw';

const Demo = () => {
  return (
    <div>
      <Button
        onClick={() => {
          Notify.success({
            placement: 'topRight',
            title: '警告通知',
            duration: null,
            description: '最简单的用法,弹出通知不消失。'
          });
        }}
      >
        ↗上右弹出通知
      </Button>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

标题不展示

import { Button, Notify } from 'uiw';

const Demo = () => {
  return (
    <div>
      <Button
        onClick={() => {
          Notify.warning({
            placement: 'topRight',
            duration: null,
            description: '标题不展示,可以通过关闭按钮关闭。',
          });
        }}
      >
        ↗上右弹出通知
      </Button>
      <Button
        onClick={() => {
          Notify.info({ placement: 'bottomLeft', description: '最简单的用法,4.5 秒后自动关闭。' });
        }}
      >
        ↙下左弹出通知
      </Button>
      <Button
        onClick={() => {
          Notify.error({ placement: 'bottomRight', description: '最简单的用法,4.5 秒后自动关闭。' });
        }}
      >
        ↘下右通知
      </Button>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

只展示标题

import { Button, Notify } from 'uiw';

const Demo = () => {
  return (
    <div>
      <Button
        onClick={() => {
          Notify.warning({
            placement: 'topRight',
            duration: null,
            title: '警告通知,最简单的用法,只展示标题,点击按钮关闭。',
          });
        }}
      >
        ↗上右弹出通知
      </Button>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

不展示图标

import { Button, Notify } from 'uiw';

const Demo = () => {
  return (
    <div>
      <Button
        onClick={() => {
          Notify.error({ placement: 'bottomRight', icon: null, description: '最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。' });
        }}
      >
        ↘下右通知
      </Button>
      <Button
        onClick={() => {
          Notify.success({
            placement: 'topRight',
            title: '警告通知',
            icon: null,
            duration: null,
            description: '最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。'
          });
        }}
      >
        ↗上右弹出通知
      </Button>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

Notify

Notify.open(config);
Notify.success(config);
Notify.warning(config);
Notify.info(config);
Notify.error(config);

参数 config 如下:

参数说明类型默认值
title通知提醒标题,必选String/ReactNodeReactNode
icon设置为 false 将不显示图标String/ReactNodeReactNode
description通知提醒内容,必选String/ReactNodeReactNode
duration默认 4.5 秒后自动关闭,配置为 null 则不自动关闭Number4.5
placement弹出位置,可选Enum{topLeft, topRight, bottomLeft, bottomRight}topRight
onClose当提醒关闭时的回调函数Functionnone

更多属性文档请参考 <Alert>

Keywords

FAQs

Package last updated on 06 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc