Import
import { ref } from "@typed/ui/NativeDialog";Signatures
export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>, options?: Options): (element: HTMLDialogElement) => Effect.Effect<void, E, R | Scope.Scope>;Why
The ref delegates open/close, top-layer placement, focus handling, and modal
inertness to showModal(), show(), and close(). It does not reproduce a
dialog with ordinary divs or synthetic events.
Ownership and lifetime
Applying the ref forks an observer in the current Effect Scope. Modal opening
waits for a detached host to connect; a newer state or Scope finalization cancels
that pending connection check. Hidden documents may defer the check until animation
frames resume. Finalization does not close state owned elsewhere or remove
the element. Dialog.Content handles native cancel, close, and toggle
events and composes exactly one hydration owner.
Examples
import { Effect } from "effect"
import * as Dialog from "@typed/ui/Dialog"
import * as NativeDialog from "@typed/ui/NativeDialog"
const program = Effect.gen(function* () {
const state = yield* Dialog.makeState()
return NativeDialog.ref(state, { modal: true })
})