react-stacked-toast

<Toaster /> API

Render one <Toaster /> near the root of your application. It subscribes to toast state and displays the active stack.

Import

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

You can also import Toaster from the root package:

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

Available options

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


<Toaster
  position="right"
  toastOptions={{
    duration: 3 * 1000,
    icon: '👋',
    toastLimit: 3,
    style: {
      backgroundColor: '#333',
      color: '#fff',
    },
    className: 'toast',
    viewportStyle: {
      top: 24,
    },
    viewportClassName: 'toast-viewport',
  }}
/>;
PropTypeDefaultDescription
position'right' | 'center' | 'left''right'The position of the toaster on the screen.
toastOptionsobject{}Options for customizing the appearance of toasts
toastOptions optionTypeDescription
durationnumberThe duration of each toast in milliseconds. Default is 3000
iconReactNodeThe default icon for toast notifications.
styleCSSPropertiesInline styles applied to each toast.
classNamestringA class name applied to each toast.
toastLimitnumberThe maximum number of visible toasts. Default is 3.
viewportStyleCSSPropertiesInline styles applied to the toast viewport.
viewportClassNamestringA class name applied to the toast viewport.

Usage

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


export const App = () => (
  <>
    <Toaster position="right" />
    {/* Other components */}
  </>
);