🍞 react-stacked-toast

https://github.com/nhanluongoe/react-stacked-toast/assets/42910096/ad5cf539-0c47-4afb-a39b-6594a5337860

When one toast is not enough, stack them up!

🔥 Features

• 📦 Stackable: Toast notifications are able to stack up on top of each other

• 🎯 Simple: Easy to use APIs with minimal setup

• 🎨 Customizable: You can customize the toast notification by passing a React component

🏃 Getting started

Using npm:

npm i react-stacked-toast

Using yarn:

yarn add react-stacked-toast

📚 Usage

1. Add the Toaster component to the your application

import { Toaster } from 'react-stacked-toast';

const App = () => {
  return (
    <Toaster />
    // Other components
  );
};

2. Use the toast api to create a toast anywhere in your application

import { toast } from 'react-stacked-toast';

const Component = () => {
  const handleClick = () => {
    // Quickly make a toast
    toast('Here is your toast!');

    // Or need more customization
    toast({
      title: 'React Stacked Toast',
      description: 'Here is your toast!',
      icon: '🍞',
      ...
    });
  };

  return <button onClick={handleClick}>Show toast</button>;
};

🔧 API

Full documentation can be found here on react-stacked-toast.

Acknowledgements

This project is inspired by react-hot-toast

LICENSE

License under MIT