以前从未听说过react-toastify？去看看演示
我对这个版本感到非常兴奋！主要重点是定制，我的目标是赋予您（和我自己）权力，以便您可以完全个性化通知的外观和感觉。
简而言之，react-toastify 应该能够融入任何设计系统。
样式表现在会自动注入，因此您不再需要导入它。 CSS 文件仍然由库导出。
import { ToastContainer, toast } from 'react-toastify';
function App(){
const notify = () => toast("Wow so easy !");
return (
<div>
<button onClick={notify}>Notify !</button>
<ToastContainer />
</div>
);
}
最重要的请求之一是如何自定义通知。公平地说，在此版本之前，它非常具有挑战性，因为它需要用户覆盖大量 CSS 类。
我通过删除无关的 div 元素、嵌套元素等简化了通知的 DOM 结构...这是一个重大的突破性更改，但确实值得付出努力。我可以自信地说，该库现在可以无缝集成到任何设计系统中。
下面，我仅使用 Tailwind 实现了几种不同的设计。 我没有覆盖react-toastify中的单个CSS类？！
前往 stackblitz 查看代码。
它在实践中是如何运作的？左边是旧的 DOM 结构，右边是新的 DOM 结构。
由于这些更改，没有任何内容会干扰您的内容。
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 />
</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()} />
</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 />
</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(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 />
</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()} />
</div>
);
}
如果您在通知中使用自定义组件，您可能需要更多地控制原因，特别是当它包含
多次号召性用语。
toast("hello", {
ariaLabel: "something"
})
除非您深入研究react-toastify源代码以了解如何将事物粘合在一起，否则这些钩子是无法使用的。这不是我想要给我的用户的，一开始曝光他们就是一个错误的决定，我已经吸取了很好的教训。
事后看来，我根本不应该这样做。该功能实际上没有被使用。每个回调的新签名下方：
我正在逐渐重写部分文档。我在 stackblitz 上创建了一个集合，这样您就可以在一个地方找到所有示例。我会不断添加更多示例。
以上是React-toastify v-终于可以轻松定制了的详细内容。更多信息请关注PHP中文网其他相关文章！
