ToastProvider

const toastProviderFixture = {
  id: "toastprovider",
  triggerLabel: "Show toast",
  toast: {
    id: "toast-rollback",
    title: "Rollback triggered",
    description: "ledger-api reverted to v2.4.0.",
    variant: "error",
  },
} satisfies {
  id: string;
  triggerLabel: string;
  toast: {
    id: string;
    title: string;
    description: string;
    variant: "info" | "success" | "warning" | "error";
  };
};
 
import { Button, ToastProvider, Toaster, useToast } from "@grassroot/ui-react";
 
// See Toaster.tsx for why the trigger is a separate child component. This
// example wraps its own <ToastProvider> (a standalone island has no ambient
// provider) and pushes the fixture's error-tone toast — Toaster.tsx's own
// demo covers the success/`role="status"` tone, so between the two demos
// both a11y postures (`role="status"` vs `role="alert"`) get exercised.
function ToastProviderTrigger() {
  const { toast } = useToast();
  return (
    <Button
      onClick={() =>
        toast({
          id: toastProviderFixture.toast.id,
          title: toastProviderFixture.toast.title,
          description: toastProviderFixture.toast.description,
          variant: toastProviderFixture.toast.variant,
        })
      }
    >
      {toastProviderFixture.triggerLabel}
    </Button>
  );
}
 
export default function ToastProviderDemo() {
  return (
    <div>
      <ToastProvider>
        <ToastProviderTrigger />
        <Toaster />
      </ToastProvider>
    </div>
  );
}

<script setup lang="ts">
// Hand-authored — see ToastProviderTrigger.vue for why useToast() lives in a child.
import { ToastProvider, Toaster } from "@grassroot/ui-vue";
import ToastProviderTrigger from "./ToastProviderTrigger.vue";
</script>
 
<template>
  <div>
    <ToastProvider>
      <ToastProviderTrigger />
      <Toaster />
    </ToastProvider>
  </div>
</template>

import { Component, inject } from "@angular/core";
const toastProviderFixture = {
  id: "toastprovider",
  triggerLabel: "Show toast",
  toast: {
    id: "toast-rollback",
    title: "Rollback triggered",
    description: "ledger-api reverted to v2.4.0.",
    variant: "error",
  },
} satisfies {
  id: string;
  triggerLabel: string;
  toast: {
    id: string;
    title: string;
    description: string;
    variant: "info" | "success" | "warning" | "error";
  };
};
 
import {
  GrassrootButton,
  GrassrootToastProvider,
  GrassrootToaster,
  GrassrootToast,
} from "@grassroot/ui-angular";
 
// Hand-authored — see ToasterDemo.component.ts for why no child split is
// needed. Pushes the fixture's error-tone toast — ToasterDemo's own demo
// covers the success/`role="status"` tone, so between the two demos both
// a11y postures (`role="status"` vs `role="alert"`) get exercised.
@Component({
  selector: "app-toast-provider-demo",
  standalone: true,
  imports: [GrassrootButton, GrassrootToastProvider, GrassrootToaster],
  template: `
    <div>
      <grassroot-toast-provider>
        <grassroot-button (click)="showToast()">{{ fixture.triggerLabel }}</grassroot-button>
        <grassroot-toaster />
      </grassroot-toast-provider>
    </div>
  `,
})
export class ToastProviderDemoComponent {
  private readonly toasts = inject(GrassrootToast);
  protected readonly fixture = toastProviderFixture;
 
  showToast(): void {
    this.toasts.toast({
      id: this.fixture.toast.id,
      title: this.fixture.toast.title,
      description: this.fixture.toast.description,
      variant: this.fixture.toast.variant,
    });
  }
}
 
export default ToastProviderDemoComponent;

<script lang="ts">
  // Hand-authored — see ToastProviderTrigger.svelte for why the toast call lives in a child.
  import { ToastProvider, Toaster } from "@grassroot/ui-svelte";
  import ToastProviderTrigger from "./ToastProviderTrigger.svelte";
</script>
 
<div>
  <ToastProvider>
    <ToastProviderTrigger />
    <Toaster />
  </ToastProvider>
</div>

/** @jsxImportSource solid-js */
// Hand-authored — see ToastProviderTrigger.tsx for why the toast call lives in a child.
import { ToastProvider, Toaster } from "@grassroot/ui-solid";
import ToastProviderTrigger from "./ToastProviderTrigger";
 
export default function ToastProviderDemo() {
  return (
    <div>
      <ToastProvider>
        <ToastProviderTrigger />
        <Toaster />
      </ToastProvider>
    </div>
  );
}