ドキュメント
Sonner
Sonner
Solidのための、独創的なトーストコンポーネント。
import { Button } from "@repo/tailwindcss/ui/button";
import { toast } from "solid-sonner";
const SonnerDemo = () => {
return (
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
description: "Sunday, December 03, 2023 at 9:00 AM",
action: {
label: "Undo",
onClick: () => console.log("Undo"),
},
})
}
>
Show Toast
</Button>
);
};
export default SonnerDemo;インストール
npx shadcn-solid@latest add sonner以下の依存関係をインストールします
npm install solid-sonner以下のコードをプロジェクトにコピー＆ペーストします
import { Toaster as Sonner } from "solid-sonner";
export const Toaster = (props: Parameters<typeof Sonner>[0]) => {
return (
<Sonner
class="toaster group"
toastOptions={{
classes: {
toast:
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
description: "group-[.toast]:text-muted-foreground",
actionButton:
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
cancelButton:
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
},
}}
{...props}
/>
);
};以下の依存関係をインストールします
npm install solid-sonner以下のコードをプロジェクトにコピー＆ペーストします
import { Toaster as Sonner } from "solid-sonner";
export const Toaster = (props: Parameters<typeof Sonner>[0]) => {
return (
<Sonner
class="toaster group"
toastOptions={{
classes: {
toast:
"group toast group-[.toaster]:(bg-background text-foreground border-border shadow-lg)",
description: "group-[.toast]:text-muted-foreground",
actionButton: "group-[.toast]:(bg-primary text-primary-foreground)",
cancelButton: "group-[.toast]:(bg-muted text-muted-foreground)",
},
}}
{...props}
/>
);
};使用方法
import { toast } from "solid-sonner"toast("Event has been created.")import { Toaster } from "@/components/ui/sonner"
const App = () => {
return (
<Router
root={props => (
<Suspense>
<ColorModeScript />
<ColorModeProvider>
{props.children}
<Toaster />
</ColorModeProvider>
</Suspense>
)}
>
<FileRoutes />
</Router>
);
};
export default App;