React-Toastify核心API速查表：常用方法与属性一览

【免费下载链接】react-toastify React notification made easy 🚀 ! 项目地址: https://gitcode.com/gh_mirrors/re/react-toastify

快速导航

• 安装与基础使用
• 核心方法速查
• 容器组件属性
• 过渡动画效果
• 实战示例

安装与基础使用

要开始使用React-Toastify，首先需要通过npm或yarn安装：

npm install react-toastify
# 或
yarn add react-toastify

基础使用包含两个必要步骤：导入ToastContainer组件和toast方法，然后在应用中渲染ToastContainer并调用toast方法显示通知。

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => toast("Hello, React-Toastify!");
  
  return (
    <div>
      <button onClick={notify}>显示通知</button>
      <ToastContainer />
    </div>
  );
}

ToastContainer组件是必须的，它负责渲染所有通知。你可以在应用的根组件中只渲染一次src/index.ts。

核心方法速查

toast方法

toast是React-Toastify的核心方法，用于显示通知。它提供了多种便捷的通知类型：

// 基本通知
toast("这是一条基本通知");

// 成功通知
toast.success("操作成功！");

// 错误通知
toast.error("操作失败，请重试");

// 警告通知
toast.warning("请注意，这是一条警告");

// 信息通知
toast.info("这是一条信息通知");

// 加载中通知
toast.loading("加载中...");

这些方法都在src/core/toast.ts中定义，它们返回一个通知ID，可以用于后续操作如更新或关闭通知。

高级方法

toast.promise

处理异步操作的便捷方法，会根据Promise的状态自动更新通知：

toast.promise(
  fetchData(),
  {
    pending: "加载中...",
    success: "数据加载成功",
    error: "数据加载失败"
  }
);

toast.update

更新已显示的通知：

const id = toast.loading("加载中...");
// 执行异步操作后...
toast.update(id, { 
  render: "加载完成", 
  type: "success",
  isLoading: false,
  autoClose: 3000
});

toast.dismiss

关闭通知：

// 关闭指定通知
toast.dismiss(id);

// 关闭所有通知
toast.dismiss();

toast.isActive

检查通知是否处于活动状态：

if (toast.isActive(id)) {
  // 通知仍在显示
}

容器组件属性

ToastContainer组件接受多种属性来自定义通知容器的行为和样式，以下是常用属性：

属性名	类型	默认值	描述
position	string	'top-right'	通知显示位置
autoClose	number	5000	自动关闭时间(毫秒)，设为false禁用自动关闭
hideProgressBar	boolean	false	是否隐藏进度条
newestOnTop	boolean	false	是否最新通知显示在顶部
closeOnClick	boolean	true	点击通知是否关闭
rtl	boolean	false	是否启用从右到左布局
pauseOnFocusLoss	boolean	true	窗口失去焦点时是否暂停自动关闭
pauseOnHover	boolean	true	鼠标悬停时是否暂停自动关闭
draggable	boolean	true	是否允许拖拽关闭
draggablePercent	number	80	拖拽多少百分比后触发关闭
theme	'light' | 'dark'	'light'	主题样式

完整的属性定义可以在src/components/ToastContainer.tsx中查看。

位置选项

position属性支持以下值：

• 'top-right' (默认)
• 'top-center'
• 'top-left'
• 'bottom-right'
• 'bottom-center'
• 'bottom-left'

过渡动画效果

React-Toastify提供了多种过渡动画效果，可以通过ToastContainer的transition属性设置：

import { ToastContainer, Bounce, Flip, Slide, Zoom } from 'react-toastify';

// 使用不同的过渡效果
<ToastContainer transition={Bounce} />
<ToastContainer transition={Flip} />
<ToastContainer transition={Slide} />
<ToastContainer transition={Zoom} />

这些过渡效果定义在src/components/Transitions.tsx中，你也可以自定义过渡效果。

实战示例

自定义通知内容

toast.success(
  <div>
    <h3>操作成功</h3>
    <p>您的设置已保存</p>
  </div>
);

自定义样式

toast.info("自定义样式通知", {
  className: "custom-toast",
  bodyClassName: "custom-body",
  progressClassName: "custom-progress"
});

受控进度条

const id = toast.loading("文件上传中...", {
  autoClose: false,
  closeButton: false
});

// 更新进度
toast.update(id, { progress: 0.3 });
// 更多操作...
toast.update(id, { progress: 0.7 });
// 完成
toast.update(id, { 
  render: "上传完成", 
  type: "success",
  isLoading: false,
  autoClose: 3000
});

通过这些核心API，你可以轻松实现各种通知需求。更多高级用法和最佳实践，请参考项目的官方文档和示例代码。

【免费下载链接】react-toastify React notification made easy 🚀 ! 项目地址: https://gitcode.com/gh_mirrors/re/react-toastify