Usage with Next.js

How to use the library with Next.js

Create a new Next.js project:

npx create-next-app@latest

Select the default options:

√ What is your project named? ... nextjs-project
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes (👈 optional)
√ Would you like to use `src/` directory? ... Yes (👈 optional)
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

Install the library:

npm install @pheralb/toast

Add the Toaster to the layout.tsx file:

💡 By default, Toaster includes use client directive.

// 📃 layout.tsx
import { Toaster } from '@pheralb/toast';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

Use the toast function in your client components:

'use client';

import { toast } from '@pheralb/toast';

export default function MyComponent() {
  return (
    <button
      onClick={() =>
        toast.success({
          text: 'Ready 🚀✨',
        })
      }
    >
      Click me!
    </button>
  );
}

✨ Ready.