Toast

@sushindustries/ui

Strings, four seconds, bottom corner, announced politely - one provider and one hook, nothing else.

4 min read
View as MarkdownEdit on GitHub

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/toast.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/toast.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { Button, useToast } from "@sushindustries/ui";

export function SaveSettingsButton({ onSave }: { onSave: () => Promise<void> }) {
	const { toast } = useToast();

	return (
		<Button
			onClick={async () => {
				await onSave();
				toast("Settings saved");
			}}
		>
			Save
		</Button>
	);
}
tsx

What this example is not

ToastProvider is not shown here - this component assumes it is already mounted somewhere above it in the tree, the way it would be once, near the app's root, not per button.