在前端开发中，通知的功能一般都需要借助第三方库来实现。但很多库不太好用，或者不符合自己的需求。re-notifier 是一款基于 React 的通知库，它可以轻松实现我们想要的效果。
1. 安装
我们可以使用 npm 安装：
npm install re-notifier
或使用 yarn 安装：
yarn add re-notifier
2. 使用
首先，引入 re-notifier：
import { NotifierProvider, useNotifier } from 're-notifier';2.1 NotifierProvider
NotifierProvider 提供了一个全局的上下文，用来传递通知信息。我们需要将整个应用包在 NotifierProvider 中，才能在任何地方使用通知。
<NotifierProvider> <App /> </NotifierProvider>
2.2 useNotifier
useNotifier 是一个 React hook，用来接收通知的信息，我们需要在函数组件中调用它。
-- -------------------- ---- -------
-------- ------------- -
----- - ------ - - --------------
----- ----------- - -- -- -
--------
------ --------
-------- ----- -- - --------------
----- ----------
---
--
------ -
------- --------------------------- -----------
--
-notify 方法接收一个对象参数，包括以下属性：
title: 通知标题，可选，默认为''message: 通知内容，可选，默认为''type: 通知类型，可选，值为info、success、warning、error中的一个，默认为infotimeout: 通知自动关闭的时间，可选，单位为毫秒，默认为3000（即 3 秒）
3. 自定义样式
re-notifier 提供了默认的样式，但我们可以自定义样式来适应自己的需求。
-- -------------------- ---- -------
------ - ----------------- ------------ ------------- ------------- - ---- --------------
----- ------- - ---------------
----------------
------- -
-----------------------
-------- -------
-------- -------
-------- -------
------ -------
--
---
-------- ----- -
-- ---
-我们可以使用 generateTheme 方法生成一个新的主题，通过修改主题中的颜色来达到自定义样式的目的。
4. 示例代码
-- -------------------- ---- -------
------ - ----------------- ------------ ------------- ------------- - ---- --------------
----- ------- - ---------------
----------------
------- -
-----------------------
-------- -------
-------- -------
-------- -------
------ -------
--
---
-------- ----- -
------ -
----------------- ----------------
------------ --
-------------------
--
-
-------- ------------- -
----- - ------ - - --------------
----- ----------- - -- -- -
--------
------ --------
-------- ----- -- - --------------
----- ----------
-------- -----
---
--
------ -
------- --------------------------- -----------
--
-5. 总结
re-notifier 是一款方便且易用的通知库，它提供了默认的样式，并支持自定义样式。使用 re-notifier 可以快速实现通知功能，并且可以通过修改主题中的颜色来适应自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5651ab1864dac66b75