Toast
A toast is used to notify users about a particular event. We built this with an imperative API
exposted via the useToast
hook. We use the library toasted-notes under the hood.
Toast accepts the following options:
- title: The title of the notification.
- subtitle: The subtitle of the notification.
- duration: How long the toast remains visible in ms. Set to null for it to remain open indefinitely.
- position: The position where the toast will appears. Can be top-left, top, top-right, bottom-left, bottom, bottom-right.
- intent: Accepts the same intent options as Alert.
- render: Used to render custom toast notifications.
Trigger toast example
Basic usage
Import the useToast
hook within a React function component and trigger it in response to errors or user events.
import { useToast } from "sancho"; function Example() { const toast = useToast(); return ( <Button onPress={() => { toast({ title: "My primary message for the user.", duration: 3000, subtitle: "Details to report to the user." }); }} > Trigger </Button> ); }
Altering positions
<Button onPress={() => { [ "top-left", "top", "top-right", "bottom-left", "bottom", "bottom-right" ].map(position => { toast({ title: "Hello world!", position }); }); }} > Show all the toasts </Button>
Changing the alert intent
<Button onPress={() => { ["info", "success", "question", "danger", "warning"].map((intent, i) => { toast({ title: intent, intent, }); }); }} > Show toast </Button>
Using a custom element
You can supply a custom element by providing a render option.
<Button onPress={() => { toast({ render: () => <div>Hello world!</div> }); }} > Show toast </Button>
Using a render callback
Using a render callback allows you to supply a custom element and control when the toast is closed.
<Button onPress={() => { toast({ render: ({ onClose, id }) => ( <div id={id}> <Text>Hello world</Text> <Button onPress={onClose}>Close me</Button> </div> ) }); }} > Show toast </Button>