【开源推荐】Sonner：更好的 React Toast 库

【开源推荐】Sonner：更好的 React Toast 库

简介

Sonner 是一个 React Toast 组件库，目前 Github Star 已经 9.6k，足以看出其火爆程度。 Sonner 的 Slogan：An opinionated toast component for React. 我让 GPT 翻译了下 opinionated，他给出的解释：

“opinionated” 可以翻译为“有观点的”或“倾向性的”，在特定上下文中也可译为“建议型的”或“固执的”。在软件开发中，通常指的是某个工具或框架在设计上倾向于使用某种特定的方式或方式来完成任务，从而减少选择的复杂性。

使用

Sonner 的使用十分简单：

安装

npm install sonner

使用

app 内引入 Toaster 组件，在需要 Toast 的地方调用 toast 方法即可。

import { Toaster, toast } from 'sonner'

// ...

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>
        Give me a toast
      </button>
    </div>
  )
}

Sonner 内部维护一个队列，Toast 会依次弹出和消失，默认会有一个很好看的重叠效果。

同时 Sonner 也提供了很多配置，比如重叠效果配置、颜色配置等等，还可以自定义样式行为。更多信息可以查看文档：sonner.emilkowal.ski/。

总结一下

Sonner 不依赖任何其他组件库，简洁强大好看。如果你的项目使用 React，又有使用 Toast 的需求，十分推荐使用 Sonner。毕竟 vercel 开源的 AI Chatbot - ai-chatbot 也使用了 Sonner。😎