NanoToaster 🚀

Lightweight, dependency-free React toast notifications.
A clean, minimal, and fast toaster library for modern web apps — built with simplicity in mind.

📦 Installation

npm install nano-toaster

Usage

Import the toaster and styles

import { toast, Toaster } from 'nano-toaster';
import 'nano-toaster/lib/nano-toaster/styles.css';

Use the toast methods in your components

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <button onClick={() => toast.success('Success!')}>Show Success</button>
      <button onClick={() => toast.error('Error!')}>Show Error</button>
      <button onClick={() => toast.info('Info!')}>Show Info</button>

      <Toaster
        position="top-right"
        textClassName="custom-text"
      />
    </div>
  );
}

🧱 Toast API

| Method | Description | Example | |----------------|-------------------------|----------------------------------------| | toast.success| Show a success message | toast.success('Saved!') | | toast.error | Show an error message | toast.error('Something went wrong') | | toast.info | Show an info message | toast.info('Heads up!') |

🍭 Customization

| Prop | Description | |-----------------|---------------------------------------------------------| | position | Toast placement (top-right, bottom-center, etc.) | | textClassName | Customize toast text (font size, weight, color, etc.) |

🧊 Extras

• ✅ Built-in icons based on toast type
• ✅ Dismiss/close button on each toast

License

MIT © 2025 Ankit Jatav