Getting started

Install

npm

sh npm install @dialog-fn/react

pnpm

sh pnpm add @dialog-fn/react

yarn

sh yarn add @dialog-fn/react

Using Svelte? Install @dialog-fn/svelte instead — see the Svelte guide.

The mental model

1. Wrap your component. createDialog(MyDialog) returns a Dialog to render and a show function to open it.

2. Render <Dialog /> once. Anywhere in your tree — no provider, no special placement.

3. await show(data). It resolves with the value you pass to onConfirm, or undefined if the user dismisses.

Your first dialog

import { createDialog, type DialogComponentProps } from "@dialog-fn/react";

// Your component receives the injected props — style it however you like.
function MyDialog({ isOpen, data, onClose, onConfirm }: DialogComponentProps<{ name: string }, boolean>) {
  return (
    <dialog open={isOpen}>
      <p>Delete {data?.name}?</p>
      <button onClick={onClose}>Cancel</button>
      <button onClick={() => onConfirm?.(true)}>Delete</button>
    </dialog>
  );
}

// Call once at module scope — types are inferred from MyDialog.
const { Dialog, show } = createDialog(MyDialog);

export function Page() {
  async function remove() {
    const confirmed = await show({ name: "report.pdf" });
    if (confirmed) console.log("deleted");
  }

  return (
    <>
      <button onClick={remove}>Delete</button>
      <Dialog />
    </>
  );
}

That’s the whole API. Next: the core concepts, or copy-paste a recipe with a live, editable playground.