React Notification Toaster

A lightweight and customizable notification toaster for React applications.

Installation

npm install reactnotificationtoaster

Usage

1. Import the component and styles

import { Toaster, toast } from 'reactnotificationtoaster';
import 'reactnotificationtoaster/src/App.css';

2. Add the Toaster component to your app

function App() {
  return (
    <div>
      {/* Your app content */}
      <Toaster position="top-right" maxToasts={5} />
    </div>
  );
}

3. Trigger notifications

// Success notification
toast.success('Operation completed successfully!');

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

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

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

// Custom notification
toast.custom('Custom message', {
  type: 'default',
  duration: 3000
});

API

Toaster Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | position | string | 'top-right' | Position of toaster: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' | | maxToasts | number | 5 | Maximum number of toasts to display |

Toast Methods

toast.success(message, options)

Display a success notification.

toast.error(message, options)

Display an error notification.

toast.warning(message, options)

Display a warning notification.

toast.info(message, options)

Display an info notification.

toast.custom(message, options)

Display a custom notification.

toast.dismiss(id)

Dismiss a specific toast by ID, or all toasts if no ID provided.

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | title | string | - | Optional title for the toast | | duration | number | 3000 | Duration in ms (set to 0 for persistent) | | type | string | 'default' | Toast type: 'success', 'error', 'warning', 'info', 'default' |

Examples

// Toast with title
toast.success('Profile updated successfully', {
  title: 'Success'
});

// Toast with custom duration (5 seconds)
toast.info('This will stay for 5 seconds', {
  duration: 5000
});

// Persistent toast (must be dismissed manually)
const id = toast.warning('Please review this carefully', {
  duration: 0
});

// Dismiss specific toast
toast.dismiss(id);

// Dismiss all toasts
toast.dismiss();

License

ISC

Author

Zarrar Hussain Abid