Toast

Setup

Unlike other Balance components, Toast is exposed via a hook and rendered automatically at the top-right of the viewport using a React portal. This is managed by the ToastProvider component. The useToast hook won't work unless it is nested within a ToastProvider. Most apps should just render this within their top level Core component.

NOTE: Only a render a single ToastProvider, not one per useToast instance.

import { Core } from '@balance-web/core';
import { ToastProvider } from '@balance-web/toast';

return (
  <Core>
    <ToastProvider>
      <AppContent />
    </ToastProvider>
  </Core>
);

Usage

You'll typically add a toast within a React effect when a form is submitted, but for these examples we're just going to add them via a button.

Hook

Access the addToast and removeToast methods with the useToasts hook.

Message

Provide an optional message to give the user more information about the outcome of an action.

Preserve

By default, each toast will auto-dimiss after five seconds. Pass the preserve option to disable this behaviour, and keep the toast visible until the user intentionally dismisses it.

Tone

Toasts are available in four tones.

Programmatic removal

You may want to remove a toast programmatically, when some state has changed outside of any user interaction. For instance, when they have lost or regained connectivity.

Provide a unique ID to the addToast options, which you can use later to remove the toast.