React Toast

A lightweight, zero-dependency React toast notification library built with React, TypeScript, Vite, and Tailwind CSS.

Features

- 🚀 Zero dependencies (except React peer deps)
- 🎯 Call toast() from anywhere - even outside React components
- ⚡ Two usage modes: Component () or Programmatic API
- 🎨 Tailwind CSS styling - no inline styles
- 📦 Tiny bundle size
- 🔥 SSR safe
- 💪 TypeScript support
- 🎭 Beautiful animations
- 🎨 Customizable colors and positions
- 🚫 No React Context/Provider required

Installation

``bash
npm install react-toast-notification-aayan
`

Setup

There are two ways to use this library:

$3

Import the CSS and add the component to your app:

`tsx
import { Toaster, toast } from 'react-toast-notification-aayan';
import 'react-toast-notification-aayan/styles.css';

function App() {
return (
<>

{/ Your app content /}
toast.success('Hello!')}>
Show Toast


);
}
`

$3

Just import the CSS - the toast container will be automatically created:

`tsx
import { toast } from 'react-toast-notification-aayan';
import 'react-toast-notification-aayan/styles.css';

function App() {
return (
toast.success('Hello!')}>
Show Toast

);
}
`

Note: Both approaches work perfectly! Use whichever fits your needs better.

Usage

$3

`tsx
import { toast } from 'react-toast-notification-aayan';

// Simple toast
toast('Hello World!');

// With options
toast('Custom toast', {
duration: 5000,
position: 'top-right',
color: 'success',
closable: true
});
`

$3

`tsx
// Success
toast.success('Operation successful!');

// Error
toast.error('Something went wrong!');

// Info
toast.info('Here is some information');

// Warning
toast.warning('Please be careful!');
`

$3

`tsx
// Manual dismiss
const id = toast('This can be dismissed');
toast.dismiss(id);

// Clear all toasts
toast.clear();
`

$3

`typescript
interface ToastOptions {
duration?: number; // Auto-dismiss time in ms (default: 3000, 0 = no auto-dismiss)
position?: ToastPosition; // 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
color?: ToastColor; // 'success' | 'error' | 'info' | 'warning' | custom
closable?: boolean; // Show close button (default: true)
className?: string; // Additional CSS classes
}
`

$3

- top-right (default)
- top-left
- bottom-right
- bottom-left

$3

`tsx
toast('Custom color toast', {
color: 'purple' // Will use bg-purple-500
});
`

$3

`tsx
import { Toaster, toast } from 'react-toast-notification-aayan';
import 'react-toast-notification-aayan/styles.css';

function App() {
const handleSuccess = () => {
toast.success('Data saved successfully!');
};

const handleError = () => {
toast.error('An error occurred!');
};

const handleCustom = () => {
toast('Custom message', {
duration: 5000,
position: 'bottom-left',
color: 'purple',
closable: true
});
};

return (
<>



);
}

export default App;
`

$3

Works in React components:

`tsx
import { Toaster, toast } from 'react-toast-notification-aayan';

function MyComponent() {
return (
toast.success('Clicked!')}>
Click me

);
}
`

Works outside React:

`tsx
// In a utility function
export function saveData() {
try {
// Save logic
toast.success('Data saved!');
} catch (error) {
toast.error('Failed to save');
}
}

// In an API client
fetch('/api/data')
.then(() => toast.success('Data loaded'))
.catch(() => toast.error('Load failed'));
`

API Reference

$3

The main component to render the toast container in your app.

`tsx
import { Toaster } from 'react-toast-notification-aayan';

function App() {
return (
<>

{/ Your app content /}

);
}
`

Note: You only need to include once in your app, typically in your root component.

$3

Shows a toast notification.

Returns: string - Toast ID

$3

Shows a success toast.

Returns: string - Toast ID

$3

Shows an error toast.

Returns: string - Toast ID

$3

Shows an info toast.

Returns: string - Toast ID

$3

Shows a warning toast.

Returns: string - Toast ID

$3

Dismisses a specific toast.

Parameters:
- id: string - Toast ID returned from toast()

$3

Clears all toasts.

Architecture

- Two Usage Modes:
- Component Mode: Use for declarative React approach
- Programmatic Mode: Auto-mounting container for imperative usage
- Global Store: Toast state managed outside React (no React imports in store)
- Auto-mounting: Container automatically mounts on first toast (programmatic mode)
- Auto-unmounting: Container unmounts when no toasts remain (programmatic mode)
- Single Root: Reuses same React root for efficiency
- SSR Safe: No window/document access at import time
- Portal-based: Renders at document body level (programmatic mode) or inline (component mode)

Why Two Usage Modes?

Use when:
- You prefer declarative React patterns
- You want full control over where toasts render
- You're building a component-based architecture

Use Programmatic API when:
- You need to call toasts from non-React code
- You want the simplest possible setup
- You're migrating from another toast library

Both modes can be used together seamlessly!

Development

`bash


Install dependencies

npm install

Build

npm run build

Dev mode

npm run dev
``

License

MIT

customToastNPM