React-stacked-toast NPM

🍞 react-stacked-toast

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

🔥 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>;
};