Skip to content

Latest commit

 

History

History
119 lines (89 loc) · 5.05 KB

README.md

File metadata and controls

119 lines (89 loc) · 5.05 KB
Raw

React Toast

A configurable, composable, toast notification system for react.

Originally fork from https://jossmac.github.io/react-toast-notifications

Installation

Add the below line to your dependencies in package.json

"react-toast": "git://github.com/taskworld/react-toast.git"

Usage

Wrap your app in the ToastProvider, which provides context for the Toast descendants.

import { ToastProvider, useToasts, DefaultToast, DefaultToastContainer } from 'react-toast';

const FormWithToasts = () => {
  const { addToast } = useToasts();

  const onSubmit = async value => {
    const { error } = await dataPersistenceLayer(value);

    if (error) {
      addToast(error.message, { appearance: 'error' });
    } else {
      addToast('Saved Successfully', { appearance: 'success' });
    }
  };

  return <form onSubmit={onSubmit}>...</form>;
};

const App = () => (
  <ToastProvider components={{ Toast: DefaultToast, ToastContainer: DefaultToastContainer }}>
    <FormWithToasts />
  </ToastProvider>
);

ToastProvider Props

For brevity:

  • PlacementType is equal to 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right'.
  • TransitionState is equal to 'entering' | 'entered' | 'exiting' | 'exited'.
Property Description
autoDismissTimeout number Default 5000. The time until a toast will be dismissed automatically, in milliseconds.
autoDismiss boolean Default: false. Whether or not to dismiss the toast automatically after a timeout.
children ReactNode Required. Your app content.
components { ToastContainer, Toast } The underlying components.
newestOnTop boolean Default false. When true, insert new toasts at the top of the stack.
placement PlacementType Default top-right. Where, in relation to the viewport, to place the toasts.
portalTargetSelector string Which element to attach the container's portal to. Uses document.body when not provided.
transitionDuration number Default 220. The duration of the CSS transition on the Toast component.

Toast Props

Property Description
appearance Used by the default toast. One of success, error, warning, info.
children Required. The content of the toast notification.
autoDismiss boolean Inherited from ToastProvider if not provided.
autoDismissTimeout number Inherited from ToastProvider.
onDismiss: Id => void Passed in dynamically. Can be called in a custom toast to dismiss it.
placement PlacementType Inherited from ToastProvider.
transitionDuration number Inherited from ToastProvider.
transitionState: TransitionState Passed in dynamically.

React Hook

The useToast hook has the following signature:

const {
  addToast,
  removeToast,
  removeAllToasts,
  updateToast,
  toastStack,
} = useToasts();

The addToast method has three arguments:

  1. The first is the content of the toast, which can be any renderable ReactNode.
  2. The second is the Options object, which can take any shape you like. Options.appearance is required when using the DefaultToast. When departing from the default shape, you must provide an alternative, compliant Toast component.
  3. The third is an optional callback, which is passed the added toast ID.

The removeToast method has two arguments:

  1. The first is the ID of the toast to remove.
  2. The second is an optional callback.

The removeAllToasts method has no arguments.

The updateToast method has three arguments:

  1. The first is the ID of the toast to update.
  2. The second is the Options object, which differs slightly from the add method because it accepts a content property.
  3. The third is an optional callback, which is passed the updated toast ID.

The toastStack is an array of objects representing the current toasts, e.g.

[
  {
    content: 'Something went wrong',
    id: 'generated-string',
    appearance: 'error',
  },
  { content: 'Item saved', id: 'generated-string', appearance: 'success' },
];