强大的 React 通知库 react-notifications-component

在本文中,我们将探讨新版本的 react-notifications-component (v2.0.6) 这是一个 React 组件,为您提供一个功能齐全的通知系统,这将节省您自己构建一个的时间和精力。

让我们开始安装它,以及animate.css:

1npm install --save react-notifications-component animate.css

我们正在使用 animate.css来动画通知的输入/退出方式,但您可以使用您喜欢的任何类型动画库。

基本使用

虽然这个库充满了令人难以置信的功能,但你可以非常快地完成,因为设置 / 配置步骤是非常小的:

 1[label App.js]
 2import React from 'react';
 3import ReactNotifications from 'react-notifications-component';
 4import Homepage from './Homepage';
 5
 6function App() {
 7  return (
 8    <div>
 9      <ReactNotifications />
10      <Homepage/>
11    </div>
12  );
13};

在帽子下,它使用了 Context API,所以您只需要将其列入您的应用程序一次,您将能够在任何地方使用它。

要开始显示通知,请将商店模块导入到您的任何组件中,然后使用商店.addNotification()方法:

 1[label Homepage.js]
 2import React from 'react';
 3import { store } from 'react-notifications-component';
 4import 'react-notifications-component/dist/theme.css';
 5import 'animate.css';
 6
 7function Homepage() {
 8  return (
 9    <>
10      My Website
11      <button
12        onClick={() => {
13          store.addNotification({
14            title: 'Dropbox',
15            message: 'Files were synced',
16            type: 'default',                         // 'default', 'success', 'info', 'warning'
17            container: 'bottom-left',                // where to position the notifications
18            animationIn: ["animated", "fadeIn"],     // animate.css classes that's applied
19            animationOut: ["animated", "fadeOut"],   // animate.css classes that's applied
20            dismiss: {
21              duration: 3000 
22            }
23          })
24        }}
25      >
26        Add notification
27      </button>
28    </>
29  )
30}

试试按一下按钮!

<$>[注] 注:如果您在小型设备上查看此信息,您可能会看到全宽通知。

包含几种通知类型:成功、警告、信息和默认。

个性化通知

如果您需要自己的 CSS 风格来通知,您可以使用任何有效的 React 元素作为通知!

 1[label Homepage.js]
 2function Homepage() {
 3  return (
 4    <>
 5      My Website
 6      <button
 7        onClick={() => {
 8          store.addNotification({
 9            content: MyNotification,
10            container: 'bottom-right',
11            animationIn: ["animated", "fadeIn"],  
12            animationOut: ["animated", "fadeOut"],
13            dismiss: {
14              duration: 3000
15            }
16          })
17        }}
18      >
19        Add notification
20      </button>
21    </>
22  )
23}

 1[label MyNotification.js]
 2function MyNotification() {
 3  return (
 4    <div style={{
 5      display: 'flex',
 6      backgroundColor: '#0f2f26',
 7      borderRadius: 5,
 8    }}>
 9      <AlligatorAvatar/>
10      <div>
11        <h4>Alligator.io</h4>
12        <p>Has joined the chat</p>
13      </div>
14    </div>
15  )
16}

<$>[注] 注:附加配置细节可以在文档中找到。

包装上

如果您需要 React 应用程序的通知系统,您一定要尝试 React 通知组件! 包括桌面/移动兼容性、动画选项、触摸手势和响应式设计在内的许多功能都没有被覆盖。