useToast

A hook for displaying toast notifications. Provides a toast() function to trigger notifications and manages the toast state queue.

Preview

Usage

tsx

import { useToast } from "zostel-ui";

function MyComponent() {
  const { toast } = useToast();

  return (
    <button
      onClick={() =>
        toast({
          title: "Booking Confirmed",
          description: "Your stay has been booked.",
        })
      }
    >
      Book Now
    </button>
  );
}

Standalone toast() Function

tsx

import { toast } from "zostel-ui";

// Can be used outside of React components
toast({
  title: "Success",
  description: "Operation completed.",
});

// Returns an object with dismiss and update
const { id, dismiss, update } = toast({
  title: "Uploading...",
});

// Later, dismiss it
dismiss();

Return Value

Property	Type	Description
`toasts`	`ToasterToast[]`	Array of active toast objects
`toast`	`(props: Toast) => { id, dismiss, update }`	Function to create a new toast notification
`dismiss`	`(toastId?: string) => void`	Dismiss a specific toast or all toasts

Previous useIsMobile Next useTheme