@inspect/react-toast-sileo

A lightweight React hook wrapper for Sileo that provides a cleaner, reusable, and configurable toast API.

Built to eliminate repetitive configuration and enforce consistent toast styling across applications.

✨ Features

• Clean useToast() API
• Built-in default styling
• Supports success, error, info, warning
• Supports icon and action
• Supports toast.promise
• Fully typed (TypeScript)
• Tree-shakeable
• ESM + CJS compatible
• Only compiled dist/ is published to npm

📦 Installation

npm install @inspect/react-toast-sileo

Peer Dependencies

This library requires:

• react >= 18
• sileo >= 0.1.5

Install them if not already installed:

npm install react sileo

🚀 Setup

Make sure you mount the Sileo <Toaster /> once in your app:

import { Toaster } from "sileo";

function App() {
  return (
    <>
      <Toaster />
      {/* rest of your app */}
    </>
  );
}

🔥 Usage

Basic Usage

import { useToast } from "@inspect/react-toast-sileo";

function Example() {
  const { success } = useToast();

  return (
    <button onClick={() => success("Success!", "Your action was successful.")}>
      Show Toast
    </button>
  );
}

Object Form

success({
  title: "Saved!",
  description: "Profile updated",
});

With Icon

success({
  title: "Saved!",
  icon: <CheckIcon />,
});

With Action

success({
  title: "Item deleted",
  action: {
    label: "Undo",
    onClick: () => restoreItem(),
  },
});

Promise Toast

const { promise } = useToast();

promise(fetchData(), {
  loading: "Loading...",
  success: "Data loaded!",
  error: "Something went wrong",
});

🎨 Default Configuration

By default, all toasts use:

• duration: 5000ms
• fill: "black"
• predefined title and description styles

You can override values per toast when needed.

📁 Package Contents

Only the compiled dist/ directory is published to npm.

Source files (src/) and development configurations are excluded from the published package.

🛠 Scripts

npm run build      # Build library
npm run dev        # Watch mode
npm run clean      # Remove dist folder

📝 License

MIT