@ehynds/react-toast NPM

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

react toast notification component

@infinitebrahmanuniverse/nolb-_eh @everything-registry/sub-chunk-281 @zalastax/nolb-_eh

1.0.0

3 years ago