Toast

Usage

import { Toaster, useToast } from '@wdzyi/ui';

<Toaster>
  <App />
</Toaster>

// Anywhere inside it:
const { toast } = useToast();

toast({ title: 'Changes saved', tone: 'success' });
toast({
  title: 'Couldn’t sync',
  tone: 'error',
  action: { label: 'Try again', onClick: sync },
});

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

childrenReactNode

On Toaster: anything inside it can call useToast.

containedboolean = false

On Toaster: stacks in the corner of its nearest positioned parent, rather than of the window.

durationnumber = 5000

On Toaster: how long a toast stays, in ms, unless it says otherwise.

labelstring = 'Notifications'

On Toaster: names the stack for screen readers.

toast(options: ToastOptions) => string

From useToast: shows one, with a title, a description, a tone, an action and a duration, and returns its id. Giving the id of one that’s showing updates it.

dismiss(id: string) => void

From useToast: takes one away early.

Notes

• A toast rises in out of a blur over 460ms, and the ones before it step back, each 5% smaller and peeking 10px above, three at most. Each one behind is clipped to the height of the one in front, so the peeks stay even.
• Resting the pointer on the stack, or focusing inside it, fans it into a column and pauses every countdown, and so does the page going out of sight. Each toast’s line is its countdown, so the two never drift apart, and only the front one’s is foil. One waiting out of sight behind the third holds its time until it can be seen.
• A swipe of 64px either way, or a quick flick, throws a toast off that side, and anything less springs back. Dismissed from the keys, focus moves on to the next one.
• With reduced motion, toasts fade where they stand. The countdown still runs, since it’s the time rather than a flourish.