在前端开发中，显示通知消息是一个不可或缺的功能。而 react-notification-system-2 是一个非常好用的 npm 包，它提供了一套易于使用和高度可定制的通知系统组件，配合 React 可以快速地构建出个性化的轻提示组件。本文将详细介绍 react-notification-system-2 的使用教程。
安装
首先，我们需要安装 react-notification-system-2，可以通过 npm 在命令行中进行安装：
npm install react-notification-system-2
基本使用
react-notification-system-2 提供了一个组件 NotificationContainer，我们可以将其放置在应用的根节点上，用于渲染通知消息。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - --------------------- - ---- ------------------------------
------ ---------------------------------------------
-------- ----- -
------ -
-----
------------------------------------
---------------------- --
------
-
-
-------------------- --- ---------------------------------然后，在需要显示通知的组件中，我们可以调用 addNotification 方法，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- ------------------------------
-------- ------------- -
----- - --------------- - - ------------------
----- ----------- - -- -- -
-----------------
------ -----
-------- ---------
----- -------
-------- -
--------- -----
--------- -----
--
---
--
------ -
-----
------- -----------------------------------
------
--
-以上示例中，我们使用了 useNotification hook 获取了 addNotification 方法，他接收一个 options 参数，其中：
title：通知标题message：通知内容type：通知类型，包括success、error、info、warning等dismiss.duration：通知显示时长，单位为毫秒dismiss.showIcon：是否显示通知类型标签，默认为true
在需要使用通知的组件中，我们可以通过 useNotification 获取 addNotification 方法。
高级用法
自定义通知样式
通过在 options 中传入 content 属性，我们可以自定义通知的样式和内容。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- ------------------------------
-------- ------------- -
----- - --------------- - - ------------------
----- ----------- - -- -- -
-----------------
------------ --
-------- ------- -- -
---- ---------------------------------- -------- ----------- ------- ------ ------- ---
---- --------------------------------
-----
------- ----------------------------------------
------
---- ---------------------------------------------------
------
--
---
--
------ -
-----
------- -----------------------------------
------
--
-在 options 中传入 content 函数，它接收 props 参数，包含如下属性：
id：通知唯一标识符title：通知标题message：通知内容type：通知类型iconClassName：通知类型对应的图标类名onClose：关闭通知方法
通过在 content 中定义自己的结构，并可以自定义样式，实现自定义通知的效果。
多种显示位置
通知组件默认显示在右上角，但是也支持多种显示位置的设置。我们可以在 NotificationContainer 中传入 position 属性进行配置。position 可以是以下几种：
tl：左上tr：右上tc：顶部居中bl：左下br：右下bc：底部居中
function App() {
return (
<div>
<h1>react-notification-system-2</h1>
<NotificationContainer position="bc" />
</div>
)
}定制化动画效果
NotificationContainer 提供了三个可供设置的属性：
enter：通知进入的动画时间和效果exit：通知消失的动画时间和效果noAnimation：是否禁用动画效果，默认为false
可以通过在 NotificationContainer 中传入这些属性来完成动画效果的设置，如：
function App() {
return (
<div>
<h1>react-notification-system-2</h1>
<NotificationContainer enter={{ animation: "fadeIn" }} exit={{ animation: "fadeOut" }} noAnimation={false} />
</div>
)
}总结
以上就是使用 react-notification-system-2 打造高度可定制轻提示的内容。react-notification-system-2 简单易用，并且提供了丰富的配置选项，可以快速实现满足业务需求的通知效果。希望这篇文章可以帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d9881e8991b448db562