简介
在前端开发过程中，经常需要给用户展示提示信息，例如成功、失败、警告等。react-toast-notifications 是一个优秀的 npm 包，它提供了一种简单易用的方法显示 toast 弹框，并且支持自定义样式和动画。
本文将详细介绍 react-toast-notifications 的使用方法，包括安装、基本用法和高级用法，同时为读者提供详细的代码示例，希望能够帮助读者快速上手并且深入了解该工具的使用方法。
安装
使用 npm 或 yarn 安装 react-toast-notifications，并在项目中导入：
npm install react-toast-notifications # 或者 yarn add react-toast-notifications
然后，你需要将 ToastProvider 组件放置在渲染树的顶部，它会包裹整个应用，处理 Toast 的逻辑。
import React from "react";
import { ToastProvider } from "react-toast-notifications";
const App = () => (
<ToastProvider>
<div>应用内容</div>
</ToastProvider>
);这里的 div 内容是你应用的实际内容，它包含在 ToastProvider 中，从而允许你在全局范围内使用 Toast。
基本用法
接下来，我们会演示最基本的使用方法，展示 Toast 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- ----------------------------
----- ------- - -- -- -
----- - -------- - - ------------
----- ----------- - -- -- -
----------------- ------- -
----------- ----------
------------ -----
---
--
------ -
-----
------- -------------------------- --------------
------
--
--在这个例子中，我们首先使用 useToasts hook 获取 addToast 方法。然后，我们在点击按钮后调用该方法显示 Toast。
addToast 方法接受两个参数，第一个是显示的文本内容，第二个是配置对象。在这个例子中，配置对象包含以下几个属性：
appearance：Toast 状态，可以为success、warning、error、info；autoDismiss：是否自动关闭 Toast，可以为true或false。
运行代码，点击按钮将会展示一个成功状态的 Toast。
高级用法
react-toast-notifications 非常灵活，它支持很多高级配置，例如自定义 Toast 组件、自定义位置、自定义样式和动画等等。下面我们逐一介绍这些高级用法。
自定义 Toast 组件
通过设置 ToastProvider 的 components 属性，可以轻松自定义 Toast 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ----------------------------
----- ----------- - -- ----------- -------- -- -- -
---- -------- ---------------- ------------ ------------- ------ -------- ----- ---
----------
------
--
----- --- - -- -- -
-------------- ------------- ------ ----------- ---
---------------
----------------
--在这个例子中，我们创建了一个名为 CustomToast 的自定义组件，它会代替默认的 Toast 组件。我们给它设置了一个浅灰色背景和圆角边框，以及简单的文本内容。
然后，我们将自定义组件传递给 ToastProvider 的 components 属性。现在，所有的 Toast 将使用我们自定义的组件。
自定义位置
通过设置 ToastProvider 的 placement 属性，可以轻松定制显示 Toast 的位置。
import React from "react";
import { ToastProvider } from "react-toast-notifications";
const App = () => (
<ToastProvider placement="bottom-right">
<div>应用内容</div>
</ToastProvider>
);在这个例子中，我们设置 Toast 在屏幕的右下角显示。placement 属性可以为以下几个值：
top-left：在屏幕左上角显示；top-center：在屏幕顶部居中显示；top-right：在屏幕右上角显示；bottom-left：在屏幕左下角显示；bottom-center：在屏幕底部居中显示；bottom-right：在屏幕右下角显示。
自定义样式和动画
通过设置 ToastProvider 的 transitionDuration 和 autoDismissTimeout 属性，可以轻松定制 Toast 的过渡动画和持续时间，从而达到自定义 Toast 样式的目的。
import React from "react";
import { ToastProvider } from "react-toast-notifications";
const App = () => (
<ToastProvider autoDismissTimeout={4000} transitionDuration={250}>
<div>应用内容</div>
</ToastProvider>
);在这个例子中，我们设置 Toast 自动消失的时间为 4s，设置过渡动画持续时间为 250ms。我们还可以使用 ToastProvider 的 cssModule 属性设置自定义的样式表。
结论
react-toast-notifications 是一个非常实用的提示框库，它提供了轻松易用的方法显示各种不同状态的提醒信息，支持多种高级配置，让你的应用具有良好的用户交互体验。
在这篇文章中，我们介绍了 react-toast-notifications 的安装和基本用法，以及几种高级用法，例如自定义 Toast 组件、自定义位置、自定义样式和动画。希望这篇文章可以帮助你更好的掌握它的使用方法，从而实现你的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-toast-notifications