Toast

A manager for code outside React (timers, fetch helpers). Pass it to <Toasty toastManager={…}>.

import { Button } from "@etched/reticle/button";
import { useToastManager } from "@etched/reticle/toast";

export function Preview() {
  const toasts = useToastManager();

  return (
    <Button onClick={() => toasts.add({ variant: "success", title: "Run 1,284 finished", description: "All 96 chips passed." })}>
      Finish run
    </Button>
  );
}

Installation

import { createToastManager, ToastProvider, Toasty, useToastManager } from "@etched/reticle/toast";

Examples

Variants

import { Button } from "@etched/reticle/button";
import { useToastManager } from "@etched/reticle/toast";

export function Variants() {
  const toasts = useToastManager();

  return (
    <div className="row">
      {/* Orbit's intake toast. One id, so a second save replaces the first. */}
      <Button onClick={() => toasts.add({ id: "intake", title: "Candidate saved." })}>Default</Button>
      <Button onClick={() => toasts.add({ variant: "success", title: "Run 1,284 finished", description: "All 96 chips passed." })}>
        Success
      </Button>
      <Button onClick={() => toasts.add({ variant: "info", title: "New results", description: "Lot 7 has 12 new chips." })}>Info</Button>
      <Button onClick={() => toasts.add({ variant: "warning", title: "Queue almost full", description: "New runs may start late." })}>
        Warning
      </Button>
      <Button onClick={() => toasts.add({ variant: "error", title: "Owner not saved", description: "The server did not answer. Try again." })}>
        Error
      </Button>
    </div>
  );
}

Action, update and persistent

update changes a toast in place by its id. A timeout of 0 keeps it until the user closes it.

import { Button } from "@etched/reticle/button";
import { useToastManager } from "@etched/reticle/toast";

export function ActionUpdateAndPersistent() {
  const toasts = useToastManager();

  const deleteRun = () => {
    const id = toasts.add({
      title: "Run 1,284 deleted",
      actions: [{ children: "Undo", size: "sm", onClick: () => toasts.close(id) }],
    });
  };

  const save = () => {
    const id = toasts.add({ title: "Saving owner…", timeout: 0 });
    setTimeout(() => toasts.update(id, { title: "Owner saved", variant: "success", timeout: 5000 }), 1000);
  };

  return (
    <div className="row">
      <Button onClick={deleteRun}>With action</Button>
      <Button onClick={save}>Saving, then saved</Button>
      <Button onClick={() => toasts.add({ variant: "info", title: "Firmware 2.4 is out", description: "Stays until you close it.", timeout: 0 })}>
        Persistent
      </Button>
    </div>
  );
}

API reference

Prop	Type	Default	Description
children *	ReactNode	–	The app. Toasts render in a portal above it.
toastManager	ToastManager	–	A manager from `createToastManager()`, so code outside React can show toasts here.