@divetocode/toast

A lightweight, beautiful toast notification system for React & Next.js — powered by emotion, built for speed.

✨ Features

• ⚡ Lightweight & fast
• 🎨 Simple, modern design
• 🧠 Intuitive API: showToast(), <ToastRoot />
• 🎯 Fully compatible with React & Next.js
• 🎛️ Custom color & emoji support (✅ ❌ etc.)

📦 Install

npm install @divetocode/toast

🎯 Usage

1. Add the ToastRoot once in your app layout:

import { ToastRoot } from "@divetocode/toast";

export default function App({ Component, pageProps }) {
  return (
    <>
      <ToastRoot />
      <Component {...pageProps} />
    </>
  );
}

2. Trigger a toast anywhere:

import { showToast } from "@divetocode/toast";

<button onClick={() => showToast("✅ Copy success!")}>
  Copy
</button>

🎨 Customization

| Type | Default Appearance |

| ------- | ---------------------- |

| success | ✅ Green (copy success) |

| error | ❌ Red (failure toast) |

showToast("❌ Failed to copy", { type: "error" });

📁 Folder structure

src/

├── Toast.tsx

├── ToastRoot.tsx

├── showToast.ts

└── index.ts

📄 License

MIT © divetocode

🖤 From divetocode

Built to feel right in design systems & product codebases. Use it, fork it, and toast your users the beautiful way.

📦 Package

npm: @divetocode/toast
GitHub: divetocode/divetocode-toast