useToast

Dispatches toast notifications to the global ToastContainer. Requires AppProvider (or the Redux Provider with toastReducer) to be mounted.

Import

import { useToast } from "@xocialive/ui-components/hooks";

Usage

function SaveButton() {
  const toast = useToast();

  const handleSave = async () => {
    try {
      await api.saveRecord(data);
      toast.success("Record saved");
    } catch (err) {
      toast.error("Failed to save");
    }
  };

  return <Button onClick={handleSave}>Save</Button>;
}

API

const toast = useToast();

toast.success(message: string, options?: ToastOptions): void
toast.error(message: string, options?: ToastOptions): void
toast.warning(message: string, options?: ToastOptions): void
toast.info(message: string, options?: ToastOptions): void
toast.dismiss(id?: string): void

ToastOptions

Option	Type	Default	Description
duration	number	4000	Auto-hide delay in ms
id	string	Auto-generated	Unique ID for programmatic dismiss
action	ReactNode	—	Optional action button in the toast

Prerequisites

Ensure ToastContainer is rendered in your app tree:

// App.tsx
<>
  <RouterOutlet />
  <ToastContainer />
</>

See ToastContainer.