notistack 是一款优秀的前端通知组件库，提供了可高度自定义的通知组件，同时支持多种配置和动画效果。本文将介绍 notistack 库的使用方法和一些实用技巧。
安装
notistack 是一个 npm 包，因此安装很简单。在终端中执行以下命令：
npm install notistack
导入及配置
在代码中导入组件并进行必要的配置。
-- -------------------- ---- -------
------ - ---------------- - ---- ------------
------ - ------ - ---- --------------------
-------- ------- -
------ -
----------------- -------------
------- ----------- -- ------------------ ---- ---------
---- --------
---------
-------------------
--
-SnackbarProvider组件是 notistack 库中的核心组件。它负责展示和处理通知，并维护通知队列。通过将此组件包装在应用程序的根组件周围，可以轻松地在整个应用程序范围内使用通知。maxSnack属性用于设置一次最大显示的通知数量。这可以避免屏幕上出现过多的通知。
显示通知
notistack 库提供了一个 useSnackbar hooks 用于在函数组件中方便地展示通知。
-- -------------------- ---- -------
------ - ----------- - ---- ------------
------ - ------ - ---- --------------------
-------- ------- -
----- - --------------- - - --------------
------ -
------- ----------- -- --------------------- -- - ------- ---------- - -------- --------- ----
---- ------- --------
---------
--
-在此代码中，我们使用 useSnackbar hooks，然后将 enqueueSnackbar 方法传递给按钮的点击事件处理程序。当用户单击按钮时，notistack 库将显示一个成功消息。
稍加改动，便可显示更加详细的通知：
-- -------------------- ---- -------
------ - ----------- - ---- ------------
------ - ------ - ---- --------------------
-------- ------- -
----- - --------------- - - --------------
------ -
------- ----------- -- --------------------- -- - -------- ----------- ---------- -
-------- -------
------------- -
--------- ------
----------- --------
--
----------------- -----
----
---- ---- --------
---------
--
-在此代码中，我们设置了 variant 属性为 info，指定通知类型为信息通知。然后，我们设定通知的显示位置，设定自动隐藏通知的时间等细节。
参数
在enqueueSnackbar 方法的第二个参数中，支持以下选项：
variant：通知类型，包含多种类型，如 error、warning、success、info 默认为 info
anchorOrigin：通知在屏幕上的位置，包含 vertical 和 horizontal 的值，决定通知出现的位置，默认为 vertical: 'top',horizontal: 'center'
autoHideDuration：控制通知展示时间，单位为毫秒，默认值为 5000
action：可选的操作按钮，在通知中显示为一个按钮。当单击此按钮时，会调用一个回调函数。
ContentProps：通知区域的 CSS 样式
结论
本文介绍了如何使用 notistack 库在 React 应用程序中显示通知。通过使用此库，可以轻松地向用户提供关键信息，从而增强了应用程序的用户体验。
notistack 库提供了多种配置和动画效果，你可以在其中选择，以确保通知与您的应用程序的设计风格和品牌相匹配。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/202963