toast-ninja

toast-ninja

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

Live Demo → | NPM → | GitHub →

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