Toast
One notification at the bottom of the screen, gone after 6.5 seconds.
import { NotificationHost } from '@iffday/ui';Example
A toast is a dark bar centred at the bottom of the screen. There is only ever one: a new toast replaces the last, and each disappears after 6.5 seconds. An error toast has a brand red edge on the left.
import { useT } from '@iffday/i18n';
import { Button } from '@iffday/ui';
import { useApp } from '@iffday/web/src/state';
export default function Example() {
const t = useT();
const { notify } = useApp();
return (
<>
<Button
type="button"
className="button"
onClick={() => notify(t('film.card.addedToWatchlist'))}
>
{t('film.card.watchlist')}
</Button>
<Button
type="button"
className="button"
onClick={() => notify('error.theServerHasNotConfirmedThisSaveKeepThe', 'error')}
>
{t('common.save')}
</Button>
</>
);
}Usage
- Pages never render
NotificationHostthemselves;AppProviderputs it at the bottom of every page. A page callsuseApp().notify(message, type). messagecan be a message key, such as an error key from the API, and is translated for the reader.- For saves use
useAction().run(): it sends Saved, or your own text, on success, and an error toast on failure.
Props
NotificationHost
packages/ui/src/notification.tsx:46| Prop | Type | Default |
|---|---|---|
notification* | Notification | null | |
onDismiss* | () => void |