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()
});