Notify Dash React

A lightweight, customizable toast notification library for React applications. Built with TypeScript and modern React practices, it provides an elegant way to display notifications in your React applications.

Features

• 🎨 Four toast types: success, error, warning, and info
• 📍 Four positioning options: top-right, top-left, bottom-right, bottom-left
• ⚡ Lightweight and performant
• 🎯 TypeScript support
• 🎭 Customizable styling
• ⌛ Configurable duration
• 🔄 Progress bar animation

Installation

npm install notify-dash-react
# or
yarn add notify-dash-react
# or
pnpm add notify-dash-react

Usage

1. Wrap your app with the ToastProvider:

import { ToastProvider } from 'notify-dash-react';

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

2. Add the ToastContainer component where you want to render the toasts(skip if you use ToastContainer in you app.jsx/tsx):

import { ToastContainer } from 'notify-dash-react';

function YourApp() {
  return (
    <div>
      <YourComponents />
      <ToastContainer />
    </div>
  );
}

3. Use the useToast hook to show notifications:

import { useToast } from 'notify-dash-react';

function YourComponent() {
  const { addToast } = useToast();

  const showToast = () => {
    addToast({
      message: 'Operation successful!',
      type: 'success',
      position: 'top-right',
      duration: 3000
    });
  };

  return (
    <button onClick={showToast}>
      Show Toast
    </button>
  );
}

4. Import the style.css file in your app.css:

import 'notify-dash-react/style.css';

API Reference

ToastProvider

The context provider that enables the toast functionality.

<ToastProvider>
  {children}
</ToastProvider>

useToast Hook

A custom hook that provides toast functionality.

const { addToast, removeToast } = useToast();

addToast Options

interface ToastOptions {
  message: string;                // The toast message
  type?: 'success' | 'error' | 'warning' | 'info';  // Toast type (default: 'info')
  position?: 'top-right' | 'top-left' |
             'bottom-right' | 'bottom-left';  // Toast position (default: 'top-right')
  duration?: number;              // Duration in milliseconds (default: 3000)
}

ToastContainer

The component that renders the toasts.

<ToastContainer />

Examples

Different Toast Types

// Success toast
addToast({
  message: 'Operation completed successfully!',
  type: 'success'
});

// Error toast
addToast({
  message: 'An error occurred!',
  type: 'error'
});

// Warning toast
addToast({
  message: 'Please review your input.',
  type: 'warning'
});

// Info toast
addToast({
  message: 'New updates available.',
  type: 'info'
});

Custom Duration

addToast({
  message: 'This toast will stay for 5 seconds',
  duration: 5000
});

Different Positions

addToast({
  message: 'Top center notification',
  position: 'top-center'
});

addToast({
  message: 'Bottom right notification',
  position: 'bottom-right'
});

Feedback

We value your feedback! Please take a moment to fill out feedback form to help us improve.

Angular Notify Dash

🔔 Check out Notify Dash — Toast Notifications for Angular on npm

License

MIT