React Super Toastify

A lightweight, modern React toast notification library with smooth animations and a simple developer API.

Features

• 🚀 Easy to use: Simple global API or React hooks
• 🎨 Beautiful by default: Modern, clean UI with smooth slide and fade animations
• 🛠️ Configurable: 4 types (success, error, warning, info), customizable duration
• 🧭 Positioning: 6 positions (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center)
• 📦 Lightweight: Zero UI framework dependencies

Installation

npm install react-super-toastify
# or
yarn add react-super-toastify

Setup

First, wrap your application with the ToastProvider. The provider handles the toast state and renders the toast container.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ToastProvider } from 'react-super-toastify';
import 'react-super-toastify/dist/index.esm.css'; // Don't forget to import styles

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ToastProvider>
      <App />
    </ToastProvider>
  </React.StrictMode>
);

Usage

Global API

You can use the global toast object anywhere in your app:

import React from 'react';
import { toast } from 'react-super-toastify';

function App() {
  const showToast = () => {
    toast.success('Profile Updated Successfully!', {
      duration: 3000,
      position: 'top-right' // top-left, bottom-right, bottom-left
    });
  };

  return (
    <div>
      <button onClick={showToast}>Show Success Toast</button>
      
      <button onClick={() => toast.error('Failed to update profile.')}>
        Show Error Toast
      </button>

      <button onClick={() => toast.warning('Your session is about to expire.')}>
        Show Warning Toast
      </button>

      <button onClick={() => toast.info('New feature available!')}>
        Show Info Toast
      </button>
    </div>
  );
}

export default App;

Custom Hook

Alternatively, use the useToast hook inside components wrapped by ToastProvider.

import { useToast } from 'react-super-toastify';

function ProfileComponent() {
  const { success, error } = useToast();

  const handleSave = async () => {
    try {
      await saveProfile();
      success('Profile saved!');
    } catch (e) {
      error('Could not save profile.');
    }
  };

  return <button onClick={handleSave}>Save</button>;
}

API Reference

toast methods

• toast.success(message, options)
• toast.error(message, options)
• toast.warning(message, options)
• toast.info(message, options)

options object

| Property | Type | Default | Description | |---|---|---|---| | duration | number | 3000 | Auto dismiss duration in milliseconds. Set to 0 to disable auto-dismiss. | | position | string | 'top-right' | position of the toast on the screen. Available: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center' |

License

MIT