Toaster

import { ToastProvider, Toaster, useToast } from "@grassroot/ui-react";
 
// once, near the root
<ToastProvider>
  <div>App</div>
  <Toaster />
</ToastProvider>
 
// anywhere below it
const { toast } = useToast();
toast({ title: "Deployed", description: "ledger-api is live in iad." });

<script setup lang="ts">
import { Toaster, ToastProvider } from "@grassroot/ui-vue";
import { useToast } from "@grassroot/ui-vue";
 
const { toast } = useToast();
</script>
 
<template>
  <ToastProvider
 
  >
    <div>App</div>
    <Toaster />
  </ToastProvider>
</template>

import { Component, inject } from "@angular/core";
import { GrassrootToaster, GrassrootToastProvider, GrassrootToast } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootToaster, GrassrootToastProvider],
  template: `
    <grassroot-toast-provider
 
    >
      <div>App</div>
      <grassroot-toaster />
    </grassroot-toast-provider>
  `,
})
export class ExampleComponent {
  private readonly toasts = inject(GrassrootToast);
}

<script lang="ts">
  import { Toaster, ToastProvider } from "@grassroot/ui-svelte";
</script>
 
<ToastProvider
 
>
  <div>App</div>
  <Toaster />
</ToastProvider>

import { Toaster, ToastProvider } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <ToastProvider
 
      >
        <div>App</div>
        <Toaster />
      </ToastProvider>
    </>
  );
}