toast-ninja

A lightweight, customizable React toast notification library built with TypeScript.

Live Demo →

Installation

npm install toast-ninja

Quick Start

Wrap your app with ToastProvider, then use the useToast hook anywhere inside it.

import { ToastProvider, useToast } from "toast-ninja";

function DemoButton() {
  const { showToast } = useToast();

  return (
    <button
      onClick={() =>
        showToast({ message: "Saved successfully!", type: "success" })
      }
    >
      Show Toast
    </button>
  );
}

export default function App() {
  return (
    <ToastProvider>
      <DemoButton />
    </ToastProvider>
  );
}

Default styles are included automatically by the package build.

Toast Types

showToast({ message: "Success!", type: "success" });
showToast({ message: "Oops!",    type: "error" });
showToast({ message: "Heads up", type: "warning" });
showToast({ message: "FYI",      type: "info" });

Promise Toast

const { toast } = useToast();

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

Configuration

<ToastProvider
  duration={3000}
  position="top-right"
  animation="slide"
  theme="dark"
  maxVisibleToasts={4}
>
  <App />
</ToastProvider>

| Option | Type | Default | | -------------------- | ----------------------------------------------------------------- | ------------- | | duration | number | 2000 | | position | "top-right" \| "top-left" \| "bottom-right" \| "bottom-left" | "top-right" | | animation | "slide" \| "fade" | "slide" | | theme | "auto" \| "light" \| "dark" | "auto" | | maxVisibleToasts | number | 4 |

Custom Styling

Override CSS variables to match your brand:

:root {
  --toast-success: #15803d;
  --toast-error:   #b91c1c;
  --toast-warning: #b45309;
  --toast-info:    #0369a1;
  --toast-bg:      #111827;
  --toast-text:    #f8fafc;
}

License

MIT