Toast & Modal

Display notifications and dialog windows from your embedded app.

Toast

Show brief notification messages at the bottom of the admin panel.

useToast()

import { useToast } from "@qumra/jisr";

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

  function handleSave() {
    // Save logic...
    toast.show({ message: "Changes saved successfully" });
  }

  function handleError() {
    toast.show({
      message: "Failed to save changes",
      isError: true,
    });
  }

  return (
    <div>
      <button onClick={handleSave}>Save</button>
      <button onClick={handleError}>Simulate Error</button>
    </div>
  );
}

Methods

Method	Description
toast.show(options)	Display a toast notification.
toast.hide()	Dismiss the current toast.

ToastOptions

Property	Type	Default	Description
message	string	--	The message to display.
duration	number	3000	Duration in milliseconds before auto-dismiss.
isError	boolean	false	Show as an error toast (red styling).
action	object	--	Optional action button { label, onAction }.

Toast with Action

toast.show({
  message: "Product deleted",
  action: {
    label: "Undo",
    onAction: () => {
      // Restore the product
    },
  },
});

---

Modal

Open dialog windows for confirmations, forms, or detailed content.

useModal()

import { useModal } from "@qumra/jisr";

function MyComponent() {
  const modal = useModal();

  function handleDelete() {
    modal.show({
      title: "Delete Product",
      message: "Are you sure you want to delete this product? This action cannot be undone.",
      primaryAction: {
        label: "Delete",
        destructive: true,
        onAction: async () => {
          await deleteProduct();
          modal.close();
        },
      },
      secondaryAction: {
        label: "Cancel",
        onAction: () => modal.close(),
      },
    });
  }

  return <button onClick={handleDelete}>Delete Product</button>;
}

Methods

Method	Description
modal.show(options)	Open a modal dialog.
modal.close()	Close the current modal.

ModalOptions

Property	Type	Description
title	string	The modal title.
message	string	The modal body text.
primaryAction	ActionOption	Primary action button (e.g. "Confirm").
secondaryAction	ActionOption	Secondary action button (e.g. "Cancel").
size	"small" | "medium" | "large"	Modal size. Default "medium".

ActionOption

Property	Type	Description
label	string	Button label text.
onAction	() => void	Callback when clicked.
destructive	boolean	Show as a destructive/red button.
loading	boolean	Show a loading spinner on the button.