use-toast-message

A simple, lightweight React hook and component for toast notifications.

Features

• Easy-to-use React hook for showing toasts
• Customizable toast types: success, error, warning, info
• Auto-dismiss with configurable duration
• Click to dismiss
• Minimal dependencies and easy integration

Installation

npm install use-toast-message
# or
yarn add use-toast-message

Usage

1. Import the CSS

Add this to your app’s entry point (e.g., src/main.tsx or src/index.tsx):

import 'use-toast-message/dist/toast.css';

2. Use the Hook and ToastContainer

import React from 'react';
import { useToast, ToastContainer } from 'use-toast-message';

function App() {
  const { toasts, showSuccess, showError, showWarning, showInfo, removeToast } = useToast();

  return (
    <div>
      <button onClick={() => showSuccess('Success!')}>Show Success</button>
      <button onClick={() => showError('Error!')}>Show Error</button>
      <button onClick={() => showWarning('Warning!')}>Show Warning</button>
      <button onClick={() => showInfo('Info!')}>Show Info</button>

      {/* Place ToastContainer near the root of your app */}
      <ToastContainer toasts={toasts} removeToast={removeToast} />
    </div>
  );
}

export default App;

API

useToast()

Returns:

• toasts: Array of current toasts
• showSuccess(message, duration?)
• showError(message, duration?)
• showWarning(message, duration?)
• showInfo(message, duration?)
• removeToast(id)

<ToastContainer />

Props:

• toasts: Array of toasts (from useToast)
• removeToast: Function to remove a toast by id

Customization

• Duration: Pass a custom duration (in ms) to any showX function.
• Styling: Override the default styles by copying and editing toast.css, or add your own CSS rules.

Example

const { showSuccess } = useToast();
showSuccess('Profile updated!', 5000); // Shows a success toast for 5 seconds

License

MIT