🍞 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?);

API Call Handle Syntax

const getUsersApi = async () => {
  const res = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  );
  const data = await res.json();
  if (!res.ok) {
    throw new Error("Failed to fetch users");
  }
  return data;
};
const handleFetch = async () => {
  try {
    const data = await toaster.promise(getUsersApi, {
      pending: "Fetching users...",
      success: "Users loaded ✅",
      error: "Failed to fetch users ❌",
    });
    console.log(data);
  } catch (error) {
    console.log(error);
  }
};
 // Note: Backend response messages can also be displayed automatically.
// Example:
{
  message: "User data found successfully",
  userData: []
}

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