React-toastify v-终于可以轻松定制了

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

v11 有什么新功能

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

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

不再需要导入css文件

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

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

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

    return (
      <div>
        <button onclick="{notify}">Notify !</button>
        <toastcontainer></toastcontainer>
      </div>
    );
  }

轻松定制！

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

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

下面，我仅使用 Tailwind 实现了几种不同的设计。 我没有覆盖react-toastify中的单个CSS类？！

前往 stackblitz 查看代码。

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

• Toastify__toast-body 和它的孩子现在完全消失了。
• CloseButton 现在使用绝对位置。

由于这些更改，没有任何内容会干扰您的内容。

Toastify__toast 有一些合理的默认值（例如，边框半径、阴影等），可以使用 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 (
    <div>
      <button onclick="{notify}">notify</button>
      <toastcontainer></toastcontainer>
    </div>
  );
}

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

前往 stackblitz 查看实例。

辅助功能和键盘导航

ToastContainer 和 toast 接受 ariaLabel 属性（最后......）。这对于屏幕阅读器和测试非常有帮助。
例如，在 cypress 中，您可以执行 cy.findByRole("alert", {name: "您指定的 aria label"}).

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

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

    return (
      <div>
        <button onclick="{notify}">Notify !</button>
        <toastcontainer></toastcontainer>
      </div>
    );
  }

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

热键当然可以更改。

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);

onClose 回调通知删除原因

您想知道用户是否关闭了通知还是自动关闭了？请放心，这现在成为可能！

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

当用户关闭通知时，reason 参数等于 true。在下面的示例中，我将我的参数命名为
删除了用户以明确意图。

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

  return (
    <div>
      <button onclick="{notify}">notify</button>
      <toastcontainer></toastcontainer>
    </div>
  );
}

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

如果您在通知中使用自定义组件，您可能需要更多地控制原因，特别是当它包含
多次号召性用语。

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

？重大变化

useToastContainer 和 useToast 不再公开

除非您深入研究react-toastify源代码以了解如何将事物粘合在一起，否则这些钩子是无法使用的。这不是我想要给我的用户的，一开始曝光他们就是一个错误的决定，我已经吸取了很好的教训。

onClose 和 onOpen 不再接收子属性

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

• onOpen: () =>;无效
• onClose: (原因?: boolean | string) =>无效

造型

• React-toastify/dist/ReactToastify.minimal.css 已被删除。
• Scss 现在已经不存在了。该库使用了很好的旧 css。
• 不再需要 bodyClassName 和 bodyStyle。
• ProgressBarStyle 是为了减少 api 表面。它们现在是在不依赖内联样式的情况下自定义所有内容的更好方法。
• 注入样式已被删除。不再需要此功能。
• CSS 类 Toastify__toast-body 及其直接子类已被删除。

？错误修复

• 添加对react19的支持 #1177 #1185
• 重新导出 CloseButtonProps #1165
• 这次修复最新的OnTop #1176
• 不再抛出这个丑陋的错误：无法设置未定义的属性（设置“切换”）#1170
• onClose 回调不再延迟，直到退出动画完成 #1179

？下一步是什么？

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

以上是React-toastify v-终于可以轻松定制了的详细内容。更多信息请关注PHP中文网其他相关文章！