useToast

useToast reads a shared context from h2o-library/hooks that must be wired to the ToastProvider from the root package. See the Toast component for provider placement, positions, and full options.

Import

import { ToastProvider } from "h2o-library";
import { useToast } from "h2o-library/hooks";

Usage

Mount the provider once at the layout root:

// app/layout.tsx
import { ToastProvider } from "h2o-library";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <ToastProvider>{children}</ToastProvider>;
}

Then call useToast() from any descendant:

import { useToast } from "h2o-library/hooks";
import { Button } from "h2o-library";

function SaveButton() {
  const { show } = useToast();

  return (
    <Button
      label="Save"
      onClick={() =>
        show({
          variant: "success",
          title: "Saved",
          description: "Your changes have been saved.",
        })
      }
    />
  );
}

show() returns the new toast's id — pair with dismiss(id) for "loading…" patterns:

const { show, dismiss } = useToast();

const id = show({ variant: "info", title: "Uploading…", duration: 0 });
await uploadFile();
dismiss(id);
show({ variant: "success", title: "Upload complete" });

Example

API

The return type matches the toast context: show(options) and dismiss(id). For the full ToastOptions table (actions, duration rules, positions), see the Toast documentation.

show(options) — key fields

PropTypeDefaultDescription
variantstring—One of info | success | warning | error.
title*string—Heading text.
descriptionstring—Optional body.
durationnumber—Auto-dismiss ms; default 5000. Pass 0 to disable auto-dismiss.

* Required