Toast Patterns

รวม toast patterns — showToast reusable function พร้อม action, promise, custom styles

Installation

ติดตั้ง shadcn-ui และ dependencies ที่จำเป็นสำหรับ Toast (sonner) ด้วย

1. Install shadcn/ui

ติดตั้ง library สำหรับ Toast (Sonner)

pnpm dlx shadcn@latest add sonner

2. Add Toaster to Root Layout

เพิ่ม Toaster component ใน RootLayout ของแอป

import { Toaster } from "sonner";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="th">
      <body>
        <main className="min-h-screen pt-20">{children}</main>
        <Toaster richColors position="top-right" />
      </body>
    </html>
  );
}

showToast — Reusable Function

Function เดียว ส่ง type (success/error/warning/info) → icon + สี เปลี่ยนอัตโนมัติ

ตัวอย่างการเรียกใช้ showToast — ดู code ด้านล่าง

Toast with Action

toast มีปุ่ม action — เช่น Undo, Retry ให้ user กดตอบโต้ได้

Promise Toast

toast.promise() — แสดง loading → success/error อัตโนมัติตาม async result

Custom Toast

toast() ใส่ JSX custom — ออกแบบ content เองได้ทั้งหมด