@ehynds/react-toast

react-toast

A deliberately minimal React toast component with an imperative API.

Installation

$ npm install --save @ehynds/react-toast

# or

$ yarn add @ehynds/react-toast

Usage

import { ToastProvider, useToast } from '@ehynds/react-toast';

// Somewhere up high in the tree
const App = () => (
  <ToastProvider>
    <SomeComponent />
  </ToastProvider>
);

const SomeComponent = () => {
  const toast = useToast();

  const onClick = () => {
    toast.success('It worked!');

    // OR:
    // toast.error('Error toast');
    // toast.info('Info toast');
  };

  return <a onClick={onClick}>Show a "success" toast</a>;
};

Options

Pass containerOptions to customize the element toasts are rendered into, and pass toastOptions to set defaults for all rendered toasts.

const containerOptions: Partial<ContainerOptions> = {
  className: 'toast-container'
};

const defaultToastOptions: Partial<ToastOptions> = {
  position: 'top-right
};

<ToastProvider
  containerOptions={containerOptions}
  toastOptions={defaultToastOptions}
/>

You can also pass ToastOptions into each toast individually:

const { success } = useToast();

success('It worked!', { autoHide: false });

Container Options

Option	Description	Default
target	A reference to an Element where toasts will be rendered into	document.body
className	A class name to attach to the container	None
style	An object of CSS properties to attach to the container	None

Toast Options

Option	Description	Default
autoHide	Whether or not each toast should automatically disappear after autoHideDuration seconds	true
autoHideDuration	How long (in seconds) until toasts disappear	5000
position	Where should toast appear? One of: top-left, top-center, top-right	top-center
onClick	A handler to capture clicks on the toast. The handler receives an object as its only argument with a dismiss function to dismiss the toast.	None
className	A class name to attach to the toast	None
style	An object of CSS properties to attach to the toast	None

Recipes

Dismiss a toast on click

const { success } = useToast():

success('Click me to dismiss', {
  onClick: ({ dismiss }) => dismiss()
});