Toaster — usage examples

Toaster ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useRef } from 'react';
import { Toaster, type ToasterHandle } from '@rozie-ui/toast-react';

export function Demo() {
  const toaster = useRef<ToasterHandle>(null);
  return (
    <>
      <button onClick={() => toaster.current?.show({ message: 'Saved!', type: 'success' })}>
        Save
      </button>
      <button onClick={() => toaster.current?.show({ message: 'Something failed', type: 'error' })}>
        Fail
      </button>

      {/* Mount the host once (typically near the app root). */}
      <Toaster ref={toaster} position="bottom-right" duration={4000} />
    </>
  );
}

// Custom per-toast chrome via the #toast scoped slot:
//   <Toaster ref={toaster}>
//     {({ toast, dismiss }) => (
//       <div className="my-toast">
//         <strong>{toast.type}</strong> {toast.message}
//         <button onClick={() => dismiss(toast.id)}>OK</button>
//       </div>
//     )}
//   </Toaster>

vue

<script setup lang="ts">
import { ref } from 'vue';
import Toaster from '@rozie-ui/toast-vue';

const toaster = ref();          // template ref → the imperative handle
</script>

<template>
  <button @click="toaster.show({ message: 'Saved!', type: 'success' })">Save</button>
  <button @click="toaster.show({ message: 'Something failed', type: 'error' })">Fail</button>

  <!-- Mount the host once (typically near the app root). -->
  <Toaster ref="toaster" position="bottom-right" :duration="4000" />

  <!-- Custom per-toast chrome via the #toast scoped slot:
  <Toaster ref="toaster">
    <template #toast="{ toast, dismiss }">
      <strong>{{ toast.type }}</strong> {{ toast.message }}
      <button @click="dismiss(toast.id)">OK</button>
    </template>
  </Toaster>
  -->
</template>

svelte

<script lang="ts">
  import Toaster from '@rozie-ui/toast-svelte';

  let toaster;                  // component instance via bind:this
</script>

<button onclick={() => toaster.show({ message: 'Saved!', type: 'success' })}>Save</button>
<button onclick={() => toaster.show({ message: 'Something failed', type: 'error' })}>Fail</button>

<!-- Mount the host once (typically near the app root). -->
<Toaster bind:this={toaster} position="bottom-right" duration={4000} />

import { Component, ViewChild } from '@angular/core';
import { Toaster } from '@rozie-ui/toast-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Toaster],
  template: `
    <button (click)="toaster.show({ message: 'Saved!', type: 'success' })">Save</button>
    <button (click)="toaster.show({ message: 'Something failed', type: 'error' })">Fail</button>

    <!-- Mount the host once (typically near the app root). -->
    <Toaster #toaster position="bottom-right" [duration]="4000" />
  `,
})
export class DemoComponent {
  @ViewChild('toaster') toaster!: Toaster;
}

tsx

import { Toaster, type ToasterHandle } from '@rozie-ui/toast-solid';

export function Demo() {
  let toaster: ToasterHandle | undefined;
  // The ref callback receives the HANDLE object (not the DOM node).
  return (
    <>
      <button onClick={() => toaster?.show({ message: 'Saved!', type: 'success' })}>Save</button>
      <button onClick={() => toaster?.show({ message: 'Something failed', type: 'error' })}>Fail</button>

      {/* Mount the host once (typically near the app root). */}
      <Toaster ref={(h) => (toaster = h)} position="bottom-right" duration={4000} />
    </>
  );
}

import '@rozie-ui/toast-lit';

// <rozie-toaster> is a custom element. Bind `position`/`duration` as properties,
// then call the imperative `show` / `dismiss` / `clear` methods on the element.
const el = document.querySelector('rozie-toaster');
el.position = 'bottom-right';
el.duration = 4000;
const id = el.show({ message: 'Saved!', type: 'success' });
// el.dismiss(id);
// el.clear();

Imperative handle

Beyond props and events, Toaster exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Toaster, type ToasterHandle } from '@rozie-ui/toast-react';

const toaster = useRef<ToasterHandle>(null);
// <Toaster ref={toaster} ... />
const id = toaster.current?.show({ message: 'Saved', type: 'success' });
toaster.current?.dismiss(id!);
toaster.current?.clear();

vue

<script setup>
import { ref } from 'vue';
const toaster = ref();          // template ref
</script>

<template>
  <Toaster ref="toaster" />
  <button @click="toaster.show({ message: 'Saved', type: 'success' })">Notify</button>
  <button @click="toaster.clear()">Clear all</button>
</template>

svelte

<script>
  let toaster;                  // component instance via bind:this
</script>

<Toaster bind:this={toaster} />
<button onclick={() => toaster.show({ message: 'Saved', type: 'success' })}>Notify</button>
<button onclick={() => toaster.clear()}>Clear all</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Toaster) toaster!: Toaster;   // or the viewChild() signal
  notify() { this.toaster.show({ message: 'Saved', type: 'success' }); }
  clearAll() { this.toaster.clear(); }
}

tsx

import { Toaster, type ToasterHandle } from '@rozie-ui/toast-solid';

let toaster: ToasterHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Toaster ref={(h) => (toaster = h)} />;
toaster?.show({ message: 'Saved', type: 'success' });
toaster?.clear();

// The custom element IS the handle — the exposed methods are public element
// methods (none overrides an inherited HTMLElement member, so there is no
// ROZ137 warning).
const el = document.querySelector('rozie-toaster');
const id = el.show({ message: 'Saved', type: 'success' });
el.dismiss(id);
el.clear();

Toaster — usage examples ​

Usage ​

Imperative handle ​

See also ​

Toaster — usage examples

Usage

Imperative handle

See also