🍞 toaster-react

A lightweight, modern, and customizable React toast notification library.

✨ Features

• 🔥 Hot by default
• 🎨 Fully customizable UI
• 🪶 Lightweight and fast
• ♿ Accessible by default
• 🧠 Headless hook support (useToaster)
• ⚡ Easy integration in any React app
• ⏳ Promise handling support
• 🌙 Dark mode support
• 📍 Multiple position support
• ❌ Dismiss notifications easily

📦 Installation

Using npm

npm install toaster-react

⚡ Quick Start Add ToasterProvider to your root layout. It renders all your toast notifications.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ToasterProvider } from "toaster-react";
import App from "./App";

function Main() {
  return (
    <StrictMode>
      <ToasterProvider>
        <App />
      </ToasterProvider>
    </StrictMode>
  );
}

createRoot(document.getElementById("root")).render(<Main />);

🎯 Usage Call useToaster() anywhere in your app.

import { useToaster } from "toaster-react";

export default function App() {
  const toaster = useToaster();

  return (
    <button onClick={() => toaster("My first toast 🎉")}>
      Show Toast
    </button>
  );
}

🧩 API

<ToasterProvider position="top-right" dark={false}/>

| Props | Type | Description | default | options | | -------- | ------ | --------------- | ----- | ---- | | position | string | | top-right | top-left, bottom-left, bottom-right, top-center, bottom-center
| dark | boolean | theme | false | true

toaster(message, options?) toaster("Hello world", { duration: 3000, closeButton:true }); | Option | Type | Description | default | | | -------- | ------ | --------------- | ----- | ---- | | message | string | Toast text | | | | duration (time in ms) | number | Auto close time | 3000 | | | closeButton | boolean. | close button show | true | |

Toaster Status Types

toaster.success(message, options?)

| Status Type | Type | Description | | ------------ | -------- | ------------------------------ | | success | function | Show success message | | error | function | Show error message | | warning | function | Show warning message | | promise | function | Handle async fetch/API promise | | dismiss | function | Close all toaster messages |

Promise status syntax

toaster.promise(promise,messages,options?)

🎯 Usage

const fetchData = async() => {
 return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Success");
    }, 2000);
  });
}

toaster.promise(fetchData(), {
      pending: "Fetching data...",
      success: "Data loaded successfully!",
      error: "Failed to load data"
    },options?);

⚠️ Important: Always return a valid Promise (resolve or reject properly).