pro-react-toast

💎 Pro React Toast 💎

A professional React toast notification library with TypeScript support, multiple themes, position control, and smooth animations.

✨ Features

• 🎨 Theme Support - Light, dark, and custom themes
• 📍 9 Positions - Place toasts anywhere on screen
• 🎯 TypeScript - Full type safety and IntelliSense
• 🔧 Customizable - Icons, duration, styling and more
• ⚡ Performance - Optimized animations and rendering
• 📱 Responsive - Works great on all devices
• 🔒 Type Safe - Built with TypeScript from ground up
• 🎪 Animations - Smooth enter/exit animations
• 🎛️ Stack Control - Limit maximum toasts shown
• ⏱️ Auto Dismiss - Configurable auto-close with progress bar
• 🧩 Easy to Use – Simple and powerful flexibility

🚀 Live Demo

• 🚀 Demo

🚀 Documentation

• Coming Soon...

📦 Installation

npm install pro-react-toast
# or
yarn add pro-react-toast
# or
pnpm add pro-react-toast

🚀 Quick Start

1. Wrap your app with ToastProvider

import { ToastProvider, ToastContainer } from "pro-react-toast";

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

2. Use the useToast hook

import { useToast } from "pro-react-toast";

function MyComponent() {
  const { toast } = useToast();

  const showSuccessToast = () => {
    toast.success("Wow Operation completed successfully!");
  };

  const showCustomToast = () => {
    toast.custom("Custom message with icon!", {
      icon: <span>🚀</span>,
      position: "bottom-right",
      theme: "dark",
      duration: 5000,
    });
  };

  return (
    <div>
      <button onClick={showSuccessToast}>Success</button>
      <button onClick={showCustomToast}>Custom</button>
    </div>
  );
}

📖 API Reference

ToastProvider Props

Prop	Type	Default	Description
children	ReactNode	-	Your app content
maxToasts	number	10	Maximum number of toasts to keep in memory

ToastContainer Props

Prop	Type	Default	Description
maxToasts	number	5	Maximum toasts to display simultaneously
position	ToastPosition	'top-right'	Default position for toasts
theme	ToastTheme	'light'	Default theme for toasts
className	string	''	Custom CSS class

Toast Options

Option	Type	Default	Description
duration	number	4000	Auto-dismiss time in ms (0 = no auto-dismiss)
position	ToastPosition	'top-right'	Toast position
theme	ToastTheme	'light'	Toast theme
icon	ReactNode	undefined	Custom icon component
closable	boolean	true	Show close button
className	string	''	Custom CSS class
style	CSSProperties	{}	Inline styles

Toast Positions

type ToastPosition =
  | "top-left"
  | "top-center"
  | "top-right"
  | "middle-left"
  | "middle-center"
  | "middle-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

Toast Themes

type ToastTheme = "light" | "dark" | "custom";

useToast Hook

const { toast, clearAll } = useToast();

// Toast methods
toast.success(message, options?)
toast.error(message, options?)
toast.warning(message, options?)
toast.info(message, options?)
toast.custom(message, options?)

// Clear all toasts
clearAll()

🎨 Customization

Custom Themes

You can customize toast appearance using CSS variables:

:root {
  --toast-bg-success: #10b981;
  --toast-bg-error: #ef4444;
  --toast-bg-warning: #f59e0b;
  --toast-bg-info: #3b82f6;
  --toast-bg-custom: #8b5cf6;
  --toast-text-color: #ffffff;
  --toast-border-radius: 8px;
  --toast-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

Custom Icons

import { CustomIcon } from "./icons";

toast.success("Success!", {
  icon: <CustomIcon />,
});

Custom Styling

toast.info("Styled toast", {
  className: "my-custom-toast",
  style: {
    background: "linear-gradient(45deg, #667eea, #764ba2)",
  },
});

🌟 Advanced Examples

Promise-based Toasts

const handleAsyncOperation = async () => {
  try {
    toast.info("Processing...", { duration: 0 });
    await someAsyncOperation();
    clearAll();
    toast.success("Wow My Operation completed!");
  } catch (error) {
    clearAll();
    toast.error("Ohhh My Operation failed!");
  }
};

Notification Center

function NotificationCenter() {
  const { toast } = useToast();

  const notifications = [
    { type: "success", message: "Profile updated" },
    { type: "info", message: "New message received" },
    { type: "warning", message: "Storage almost full" },
  ];

  const showAll = () => {
    notifications.forEach((notif, index) => {
      setTimeout(() => {
        toast[notif.type](notif.message);
      }, index * 500);
    });
  };

  return <button onClick={showAll}>Show Notifications</button>;
}

🛠️ Development

# Install dependencies
npm install

# Build the package
npm run build

# Start demo in development
npm run demo:dev

# Build demo for production
npm run demo:build

📝 TypeScript Support

This package is built with TypeScript and provides full type safety:

import { ToastOptions, ToastPosition, ToastTheme } from "pro-react-toast";

const options: ToastOptions = {
  duration: 5000,
  position: "top-left",
  theme: "dark",
  closable: true,
};

🤝 Contributing

At pro-react-toast, we believe in building with the community. Have an idea, improvement, or feature request? We’re all ears!

We welcome feedback, discussions, and collaboration to make the package more powerful and flexible for everyone.

📄 License

licensed under the MIT

Made with ❤️ by Biren Gohel