react-notifications-component，一个强大的React Notifications库

In this article, we’ll look at the new release of react-notifications-component (v2.0.6). It’s a React component that provides you with a fully-featured notification system that will save you the time & effort of building one yourself.

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

Let’s start by installing it, along with animate.css:

让我们从安装animate.css开始：

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

We’re using animate.css for animating how the notifications enter/exit, but you can use any class-based animation library that you prefer.

我们正在使用animate.css设置通知进入/退出方式的动画，但是您可以使用任何喜欢的基于类的动画库。

基本用法 (Basic Usage)

While this library is incredibly feature-packed you can get going really quickly because the setup/config steps are pretty minimal:

尽管此库具有令人难以置信的功能组合，但您可以真正快速进行，因为设置/配置步骤非常少：

App.js

App.js

import React from 'react';
import ReactNotifications from 'react-notifications-component';
import Homepage from './Homepage';

function App() {
  return (
    <div>
      <ReactNotifications />
      <Homepage/>
    </div>
  );
};

Under the hood it uses the Context API so you only need to include it once in your app, and you’ll be able to use it anywhere. You’ll likely want to place <ReactNotifications /> near the top-level of your app.

它在后台使用了Context API，因此您只需在应用程序中包含一次即可，并且可以在任何地方使用它。 您可能希望将<ReactNotifications />放置在应用程序顶层附近。

To start showing notifications, import the store module to any of your components, and use store.addNotification() method:

要开始显示通知，请将store模块导入任何组件，然后使用store.addNotification()方法：

Homepage.js

Homepage.js

import React from 'react';
import { store } from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css';
import 'animate.css';

function Homepage() {
  return (
    <>
      My Website
      <button
        onClick={() => {
          store.addNotification({
            title: 'Dropbox',
            message: 'Files were synced',
            type: 'default',                         // 'default', 'success', 'info', 'warning'
            container: 'bottom-left',                // where to position the notifications
            animationIn: ["animated", "fadeIn"],     // animate.css classes that's applied
            animationOut: ["animated", "fadeOut"],   // animate.css classes that's applied
            dismiss: {
              duration: 3000 
            }
          })
        }}
      >
        Add notification
      </button>
    </>
  )
}

Try clicking the button!

尝试单击按钮！

Note: You might see a full-width notification if you’re viewing this on a small device.

注意 ：如果您是在小型设备上查看此消息，则可能会看到全角通知。

There’s several notification types that are included: success, warning, info, and default.

其中包括几种通知类型：成功，警告，信息和默认。

自定义通知 (Customizing Notifications)

If you need your own CSS styles for your notifications, you can actually use any valid React element as a notification!

如果您需要自己CSS样式来进行通知，则实际上可以将任何有效的React元素用作通知！

Homepage.js

Homepage.js

function Homepage() {
  return (
    <>
      My Website
      <button
        onClick={() => {
          store.addNotification({
            content: MyNotification,
            container: 'bottom-right',
            animationIn: ["animated", "fadeIn"],  
            animationOut: ["animated", "fadeOut"],
            dismiss: {
              duration: 3000
            }
          })
        }}
      >
        Add notification
      </button>
    </>
  )
}

MyNotification.js

MyNotification.js

function MyNotification() {
  return (
    <div style={{
      display: 'flex',
      backgroundColor: '#0f2f26',
      borderRadius: 5,
    }}>
      <AlligatorAvatar/>
      <div>
        <h4>Alligator.io</h4>
        <p>Has joined the chat</p>
      </div>
    </div>
  )
}

Note: Additional configurations details can be found in the documentation.

注意 ：其他配置详细信息可以在文档中找到。

结语 (Wrapping Up)

If you need a notifications system for your React app you should definitely try react-notifications-component! There’s so many features that weren’t covered including desktop/mobile compatibility, animation options, touch gestures, and responsive design.

如果您的React应用程序需要一个通知系统，则绝对应该尝试react-notifications-component！ 有很多功能未包括在内，包括台式机/移动设备兼容性，动画选项，触摸手势和自适应设计。

翻译自: https://www.digitalocean.com/community/tutorials/react-react-notifications-component