HeyBinyang
← 返回开源
·UI·UIReact轻提示

Sonner

官网 ↗GitHub

一个有主见的 React toast 组件。

快速入门

Sonner 是一个 React 通知组件。你可以在此处了解它是如何构建的。

安装

通过命令行安装此组件。

终端

pnpm i sonner

将 Toaster 添加到您的应用程序

它可以放置在任何位置，甚至像 layout.tsx 这样的服务器组件内部。

layout.tsx

import { Toaster } from 'sonner';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

渲染一个通知

查看所有选项，请访问 通知页面。

import { toast } from 'sonner';
 
function MyToast() {
  return <button onClick={() => toast('Toast')}>Render Toast</button>;
}

分享

XRedditFacebookInstagramLinkedIn