🍞 react-stacked-toast

2024-03-14.18-35-21.mp4

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

🪲 Report a bug or request a feature

If you find a bug or want to request a feature, please open an issue here

🌟 Support

If you like this project, please consider giving it a star on GitHub. It's a huge encouragement for me. Thank you!

🪪 LICENSE

License under MIT