Toast

Basic usage

Mount ToasterProvider once near the root of the app, inside TelescopeProvider, and render Toaster where the toasts should appear. The provider holds the toasts, the toaster renders them.

import {Toaster, ToasterProvider} from '@pleo-io/telescope'


const App = () => (
    <ToasterProvider>
        <Routes />
        <Toaster isLoggedIn isNavigationVisible={false} navigationWidth={0} />
    </ToasterProvider>
)

Then show a toast from any component below the provider with useToaster.

import {useToaster} from '@pleo-io/telescope'


const SaveButton = () => {
    const {showToast} = useToaster()


    return <button onClick={() => showToast('Changes saved', {variant: 'positive'})}>Save</button>
}

Variants and dismissal

variant is one of info (default), positive, warning and negative. Info and positive toasts dismiss after 5 seconds and warning toasts after 8 seconds. Negative toasts stay until the user closes them. Set persistent to keep any toast until it's removed.

• hideToast(id) removes a toast without calling its onDismiss. Use it for cleanup.
• dismissToast(id) removes a toast and calls its onDismiss, like the close button and swipe do.

Action and link

showToast('Tax code archived', {
    variant: 'positive',
    action: {label: 'Undo', onClick: undoArchive},
    link: {href: '/tax-codes', text: 'View tax codes'},
})

Localisation

The close button label and the visually hidden status prefix are read from the TelescopeProvider translations (Toast.CloseButton and statusLabels).

API reference

Toaster