前言
在前端开发中，弹窗是非常常见的控件之一，原生的弹窗样式缺乏美观且不够灵活，因此使用第三方库来实现弹窗是一个常见的解决方案。今天我们介绍一款基于 React 的通知组件库，名为 Pure-notify。
Pure-notify 提供了多种样式、位置、动画效果的通知样式可供选择，其 API 友好，简单易用。
在本文中，我们将详细介绍如何在项目中使用 Pure-notify。
安装
使用 npm 安装 Pure-notify：
npm install pure-notify --save
使用
在项目中引用 Pure-notify：
import { notify } from "pure-notify"在使用时，通过调用 notify 方法来显示通知：
notify("Hello, Pure-notify")运行代码，你会看到一个简单的通知弹窗显示出来。接下来我们详细了解 Pure-notify 的使用方式和 API。
API
notify(message, options)
用于显示通知。message 参数为通知内容，可以是字符串或 JSX 元素。
options 参数为可选项，可设置通知的属性，包括：
type: string，通知样式类型，默认为"info"。duration: number，通知显示时间，单位为毫秒，默认为 3000。position: string，通知显示位置，可选值包括"top-left"、"top-right"、"bottom-left"、"bottom-right"、"top-center"、"bottom-center"，默认为"top-right"。animation: string，通知出现和消失的动画效果，可选值包括"fade"、"slide"，默认为"fade"。
以下为示例代码：
notify("Hello, Pure-notify", {
type: "success",
duration: 5000,
position: "bottom-left",
animation: "slide"
})运行代码，你会看到自定义样式的通知弹窗显示出来。
除了以上 API，Pure-notify 还提供了以下方法，可用于在需要时自定义通知组件：
withContainer(options)
用于创建一个包含通知组件的容器组件。
options 参数为可选的配置项，包括：
type: string，通知容器样式类型，默认为"default"。position: string，通知容器位置，可选值包括"top-left"、"top-right"、"bottom-left"、"bottom-right"、"top-center"、"bottom-center"，默认为"top-right"。
以下为示例代码：
-- -------------------- ---- -------
------ - ------------- - ---- -------------
----- -------- - ------------------ -------------- -------- -- -- -
---- -----------
------------------------------- -- -
---- ----------------------
----------------------------
-----------------------------
------
---
------
--以上代码创建了一个自定义的通知组件，你可以在组件内自定义通知的样式和交互方式。
总结
Pure-notify 是一个简单易用的通知组件库，提供了多种样式、位置、动画效果的通知样式可供选择，其 API 友好，简单易用。本文介绍了 Pure-notify 的安装、使用方式和 API，希望能为你的项目开发带来便利。
完整示例代码请查看 https://codesandbox.io/s/pure-notify-usage-nml28。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556c881e8991b448d39d1