toast

toast copied to clipboard

An accessible notification library for React.

Documentation   ✦   Getting Started   ✦   Contribute   ✦   Roadmap   ✦   License

🪐 Features

• [x] 🍂 Lightweight.
• [x] ✅ Accessible.
• [x] 🎨 Light, dark & system theme mode.
• [x] ⏲️ Don't close automatically when the user hover over the toast.
• [x] 🏗️ Customizable toast position.
• [x] 🍃 Disable transitions if the user has disabled them in the system.
• [x] 💙 Built completely with Typescript.

✨ Inspiration

• [x] 🎨 Notification Design by Medusa.js UI Framework.
• [x] 🛠️ Typescript API by Sonner.
• [x] 🪄 Phosphor Icons for success, error, warning, info & loading icons.

🚀 Getting Started

[!IMPORTANT] This library requires React v18 or higher.

1. Install the library:

# Using npm:
npm install @pheralb/toast

# Using pnpm:
pnpm add @pheralb/toast

# Using yarn:
yarn install @pheralb/toast

2. Add the toast provider:

// 📃 root.tsx

import { Toaster } from "@pheralb/toast";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
    <Toaster />
  </React.StrictMode>,
);

3. Usage:

// 📃 index.tsx

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

export default function Index() {
  return (
    <>
      <button
        onClick={() =>
          toast.success({
            text: "pheralb/toast",
            description: "✨ A beautiful toast library for React",
          })
        }
      >
        <span>Render a toast</span>
      </button>
    </>
  );
}

[!TIP] 📚 Visit the Documentation for more information.

🔭 Roadmap

• [x] 🚗 Add .loading variant.
• [x] 📚 Add support for Astro + React.
• [x] ✨ Export bundled & minified .css file.
• [x] 🎨 Add support to customize the default styles for greater flexibility and adaptability.

🤝 Contributing

pheralb/toast is a monorepo built with Turbo and it uses:

• Website: Next.js 15 + Content-Collections + MDX + shadcn/ui + Lucide + React-Symbols.
• Library: React 19 with tsup + Lightning CSS + Vitest for testing.

1. Click here to fork the repository.

2. Install dependencies:

# Install pnpm globally if you don't have it:
npm install -g pnpm

# and install dependencies:
pnpm install

3. Commands:

# Run only documentation website:
pnpm dev:docs

# Run all website + packages:
pnpm dev

# Build the docs & library:
pnpm build

# Test the library:
pnpm test

🧑‍🚀 Open http://localhost:3000 to view the Next.js documentation website.

and create a pull request with your features or fixes 🚀✨.

📃 License

MIT License - pheralb 2024.