# @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

```bash
npm install @divetocode/toast
```

## 🎯 Usage

### 1. Add the ToastRoot once in your app layout:

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

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

### 2. Trigger a toast anywhere:

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

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

## 🎨 Customization

| Type    | Default Appearance     |

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

| success | ✅ Green (copy success) |

| error   | ❌ Red (failure toast)  |


```bash
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`](https://www.npmjs.com/package/@divetocode/toast)  
**GitHub:** [`divetocode/divetocode-toast`](https://github.com/divetocode/divetocode-toast)