React-toastify v11

以前从未听说过 react-toastify？去查看演示

v11 中的新功能

我对这个版本感到非常兴奋！主要重点是定制，我的目标是赋予您（和我自己）权力，以便您可以完全个性化通知的外观和感觉。

简而言之，react-toastify 应该能够融入任何设计系统。

不再需要导入 css 文件

样式表现在已自动注入，因此您不再需要导入它。CSS 文件仍由库导出。

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

  function App(){
    const notify = () => toast("Wow so easy !");

    return (
      
        
        
      
    );
  }

轻松定制！

最热门的请求之一是如何自定义通知。公平地说，在此版本之前，这非常具有挑战性，因为它要求用户覆盖大量 CSS 类。

我通过删除多余的 div 元素、嵌套元素等简化了通知的 DOM 结构...这是一项重大的突破性变化，但确实值得付出努力。我可以自信地说，该库现在可以无缝集成到任何设计系统中。

下面，我仅使用 Tailwind 实现了几个不同的设计。**我没有覆盖 react-toastify 中的任何一个 CSS 类🤯！**

前往 stackblitz 检查代码。

它在实践中是如何运作的？左侧是旧的 DOM 结构，右侧是新的 DOM 结构。

Toastify__toast-body 及其子项现已完全消失。

CloseButton 现在使用绝对位置。

由于这些变化，**没有任何东西会干扰您的内容。**

`Toastify__toast` 具有一些合理的默认值（例如，border-radius、shadow 等...），可以使用 css 或通过更新相关的 css 变量进行定制：

width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
padding: var(--toastify-toast-padding);
border-radius: var(--toastify-toast-bd-radius);
box-shadow: var(--toastify-toast-shadow);
max-height: var(--toastify-toast-max-height);
font-family: var(--toastify-font-family);

自定义进度条

在开发此版本时，允许自定义进度条根本不在我的待办事项清单上。但看到现在自定义通知如此简单，我忍不住要这么做😆。

最好的部分是，您不必在“autoClose”，“pauseOnHover”，“pauseOnFocusLoss”甚至受控进度条等功能上做出妥协 - 它只是为您无缝工作。

以下是一个小要点。

function App() {
  const notify = () => {
    toast(CustomComponent, {
      autoClose: 8000,
      // removes the built-in progress bar
      customProgressBar: true
    });
  };

  return (
    
      
      
    
  );
}

// isPaused is now available in your component
// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...
function CustomComponent({ isPaused, closeToast }: ToastContentProps) {
  return (
    
      Hello
       closeToast()} />
    
  );
}

前往 stackblitz 查看实例。

辅助功能和键盘导航

`ToastContainer` 和 `toast` 接受 `ariaLabel` 属性（最后……）。这对于屏幕阅读器和测试非常有帮助。

例如，在 cypress 中您可以执行 `cy.findByRole("alert", {name: "您指定的 aria 标签"})`。

toast("hello", {
  ariaLabel: "something"
})

如果通知可见并且用户按下“alt + t”，它将聚焦于第一个通知，允许用户使用“Tab”浏览通知内的不同元素。

当然可以改变“热键”。

// focus when user presses ⌘ + F
const matchShortcut = (e: KeyboardEvent) => e.metaKey && e.key === 'f'

使用 onClose 回调来删除通知的原因

您是否想知道用户是否关闭了通知或通知是否自动关闭？放心，这现在可以实现！

`onClose` 回调的签名现在是 `onClose(reason?: boolean | string) => void`。

当用户关闭通知时，“reason”参数等于“true”。在下面的示例中，我将参数命名为

`removedByUser` 来使意图更加明确。

toast("hello", {
  onClose(removedByUser){
    if(removedByUser) {
      // do something
      return
    }

    // auto close do something else
  }
})

如果你使用自定义组件进行通知，你可能需要对原因有更多的控制，特别是如果它包含

多个行动号召。

import { ToastContentProps } from "react-toastify";

function CustomNotification({closeToast}: ToastContentProps) {
  return 
      You received a new message
      
      
    
}

toast(CustomNotification, {
  onClose(reason){
    switch (reason) {
      case "reply":
        // navigate to reply page for example or open a dialog
      case "ignore":
        // tell the other user that she/he was ghosted xD
      default:
        // 🤷‍♂️
    }
  }
})

💥 重大变化

useToastContainer 和 useToast 不再公开

除非你深入研究 react-toastify 源代码以了解如何将事物粘合在一起，否则这些钩子是无法使用的。这不是我想要为用户提供的，一开始就暴露它们是一个糟糕的决定，我已经吸取了教训。

onClose 和 onOpen 不再接收 children props

事后看来，我根本不应该这么做。该功能实际上没有使用。以下是每个回调的新签名：

onOpen: () => void

onClose: (原因？：布尔值 | 字符串) => void

造型

react-toastify/dist/ReactToastify.minimal.css 已被删除。

Scss 现在已经过时了。该库使用了旧的 css。

不再需要 bodyClassName 和 bodyStyle。

progressBarStyle 以减少 api 界面。它们现在是自定义所有内容而不依赖内联样式的更好方法。

已删除injectStyle。不再需要该函数。

css 类 Toastify__toast-body 及其直接子类已被删除。

🐞 错误修复

添加对 react19 的支持 #1177 #1185

重新导出 CloseButtonProps #1165

这次真正修复 newestOnTop #1176

不再抛出这个丑陋的错误：无法设置未定义的属性（设置“toggle”）#1170

onClose 回调不再延迟到退出动画完成 #1179

🔮下一步是什么？

我正在逐步重写部分文档。我在 stackblitz 上创建了一个合集，这样您就可以在一个地方找到所有示例。我会继续添加更多示例。

CLIS.CC