Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

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>