React-toastify v8 现已上线

之前没听说过 react-toastify？去看看demo

React-toastify 已经问世五年了（11 月 8 日将迎来五周年纪念🎂）。从一开始，我们的目标之一就是提供一个高度可定制且开箱即用的库。每个主要版本都会引入重大更改，但这次的改进对我们来说是最好的👌。

v8 中的新功能

谁不喜欢图标

让我们分解一下上面动图里发生的事情。不同类型的通知（toast.info、toast.error、toast.success、toast.warning）会显示与所选类型关联的图标。你还会注意到，进度条的颜色与类型颜色一致。

别担心😱，如果你不喜欢这些图标，你可以使用自己的图标，或者删除它们。实际使用效果如下。

toast("Default toast behavior is untouched, no icon to display");
toast.info("Lorem ipsum dolor"); // same as toast(message, {type: "info"});
toast.error("Lorem ipsum dolor")
toast.success("Lorem ipsum dolor")
toast.warn("Lorem ipsum dolor")
toast.error("Without icon", {
  icon: false
});
toast.success("You can provide any string", {
  icon: "🚀"
});
// custom icons have access to the theme and the toast type
toast.success("And of course a component of your choice", {
  icon: MyIcon
});
toast.success("Even a function, given you return something that can be rendered", {
  icon: ({theme, type}) =>  <img src="url"/>
});
//Disable icons
<ToastContainer icon={false} />

类型和主题之间有明确的区分

在 v8 之前，toast.info、toast.error等……会分别显示蓝色通知、红色通知等……现在情况已不同。共有 3 个不同的主题：light、dark、colored。主题可以全局应用，也可以按通知应用。

//Set the theme globally 
<ToastContainer theme="dark" />

// define per toast
toast.info("Display a dark notification of type info");
toast.info("Display a light notification of type info", { theme: "light" });
toast.info("Display a blue notification of type info", { theme: "colored" });

这种分离将有利于未来的主题化。

我保证这是新的，如果你等待的话我会告诉你

该库公开了一个toast.promise函数。提供一个 Promise，如果该 Promise 解析成功或失败，通知就会更新。当 Promise 处于待处理状态时，会显示一个旋转图标。同样，你需要隐藏它，我猜你已经知道怎么做了😆。

让我们从一个简单的例子开始

const resolveAfter3Sec = new Promise(resolve => setTimeout(resolve, 3000));
toast.promise(
    resolveAfter3Sec,
    {
      pending: 'Promise is pending',
      success: 'Promise resolved 👌',
      error: 'Promise rejected 🤯'
    }
)

在 90% 的情况下，你只想显示一条简单的消息。但是，如果你想要显示的消息取决于 Promise 的响应，如果你想更改错误通知的某些选项，该怎么办？请放心，该库在底层使用了toast.update。因此，你可以完全控制每条通知。

const resolveWithSomeData = new Promise(resolve => setTimeout(() => resolve("world"), 3000));
toast.promise(
    resolveAfter3Sec,
    {
      pending: 'Promise is pending',
      success: {
        render({data}){
          return `Hello ${data}`
        },
        // other options
        icon: "🟢",
      },
      error: {
        render({data}){
          // When the promise reject, data will contains the error
          return <MyErrorComponent message={data.message} />
        }
      }
    }
)

因为你拥有的全部功能toast.update，所以如果你愿意，你甚至可以提供自定义过渡 🤯

如果您想自己处理每个步骤，您可以toast.loading自己使用和更新通知。

const id = toast.loading("Please wait...")
//do something else
toast.update(id, { render: "All is good", type: "success" });

即使没有渲染 React 组件，也可以传递数据

向通知传递数据的一种方法是使用 context API 或提供您自己的组件。从 v8 开始，data现在提供了一个选项，可以更轻松地实现这一点。

toast(({data}) => `Hello ${data}`, {
  data: "world"
})

我只想改变一些颜色

大多数情况下，用户对默认样式没什么意见，只是想更改一些颜色以匹配他们的品牌。我认为改进 DX 的一个方法是拥抱 CSS 变量。这就是该库切换到 CSS 变量的原因！
您只是想更改进度条的颜色？没问题。

:root{
  // this is the default value below
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
}

您可以在此处找到所有公开变量的列表

感谢阅读。您可以点击此处查看完整的发布说明。

文章来源：https://dev.to/fkhadra/react-toastify-v8-is-live-4bal