Getting Started

React Stacked Toast gives you a small toast store and a single <Toaster /> component for rendering stacked notifications.

Install with Yarn

Copy
yarn add react-stacked-toast

Install with NPM

Copy
npm install react-stacked-toast

Quick usage

1. Add the Toaster component to your application

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

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

2. Use the toast API anywhere in your application

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

const Component = () => {
  const handleClick = () => {
    toast('Here is your toast!');

    toast({
      title: 'React Stacked Toast',
      description: 'Here is your toast!',
      icon: '🍞',
    });
  };

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

Package size

The current build is about 9.9 kB packed and 43.3 kB unpacked based on npm pack --dry-run.

The root import remains supported. If you prefer more focused entry points, you can import the toast API and toaster component separately:

Copy
import toast from 'react-stacked-toast/toast';
import { Toaster } from 'react-stacked-toast/toaster';