React Toastr 技术文档

React Toastr 技术文档

react-toastr React.js toastr component 项目地址: https://gitcode.com/gh_mirrors/re/react-toastr

1. 安装指南

1.1 安装方式

React Toastr 可以通过 npm 进行安装。请在终端中运行以下命令：

npm install react-toastr

1.2 依赖项

React Toastr 依赖于 React 和 ReactDOM，请确保你的项目中已经安装了这些依赖项。

2. 项目使用说明

2.1 引入组件

在你的 React 项目中，首先需要引入 react-toastr 组件：

import { ToastContainer, toast } from 'react-toastr';

2.2 使用 ToastContainer

在你的应用中，你需要在根组件中使用 ToastContainer 来显示 toast 消息：

<ToastContainer
  toastMessageFactory={React.createFactory(ToastMessage.animation)}
  className="toast-top-right"
/>

2.3 显示 Toast 消息

你可以使用 toast 对象来显示不同类型的 toast 消息：

toast.success("成功消息", "标题");
toast.info("信息消息", "标题");
toast.warning("警告消息", "标题");
toast.error("错误消息", "标题");

3. 项目 API 使用文档

3.1 ToastContainer API

• toastMessageFactory: 用于创建 toast 消息的工厂函数。
• className: 用于设置 toast 容器的 CSS 类名。

3.2 Toast API

• success(message, title): 显示成功消息。
• info(message, title): 显示信息消息。
• warning(message, title): 显示警告消息。
• error(message, title): 显示错误消息。

4. 项目安装方式

React Toastr 的安装方式非常简单，只需在终端中运行以下命令即可：

npm install react-toastr

安装完成后，你可以在项目中引入并使用 react-toastr 组件。

react-toastr React.js toastr component 项目地址: https://gitcode.com/gh_mirrors/re/react-toastr