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

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

阅读量：2518 次

发布时间：2019-05-11

本文共 3875 字，大约阅读时间需要 12 分钟。

In this article, we’ll look at the new release of (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.

在本文中，我们将看一下新版本的 (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 for animating how the notifications enter/exit, but you can use any class-based animation library that you prefer.

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

基本用法 (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

import React from 'react';import ReactNotifications from 'react-notifications-component';import Homepage from './Homepage';function App() {  return (    
          
           
         
    
  );};

Under the hood it uses the 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.

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

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

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

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            )}

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

function Homepage() {  return (    <>      My Website            )}

MyNotification.js

function MyNotification() {  return (    
          
           
             
      Alligator.io
        
      Has joined the chat
      
     
    
    
  )}

Note: Additional configurations details can be found in the .

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

结语 (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！有很多功能未包括在内，包括台式机/移动设备兼容性，动画选项，触摸手势和自适应设计。

翻译自:

转载地址：http://ithgb.baihongyu.com/

你可能感兴趣的文章