HeyBinyang
← 返回開源
·UI·UIReact輕提示

Sonner

官網 ↗GitHub

一個具主觀設計的 React 訊息提示元件。

快速開始

Sonner 是一個 React toast 組件。你可以此處 了解其構建方式。

安裝

從命令列安裝此組件。

終端機

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

渲染 Toast

查看 toast 頁面 中的所有選項。

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

分享

XRedditFacebookInstagramLinkedIn