Search documentation

Search by topic, API name, or import path.

GitHub ↗

function / @typed/ui/index

Dialog.Content

Renders native dialog content synchronized with hydrated state.

Learn this UI primitive →

Package version
1.0.0-beta.13
Category
Native content host
Since
1.0.0
Member of
Dialog

Import

import { Dialog } from "@typed/ui/index";

Access Dialog.Content through the imported Dialog export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

export declare function Content<const Options extends ContentOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ContentInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;

Why

Content uses a real <dialog> and its show(), showModal(), close(), cancel, close, and toggle lifecycle. The browser therefore owns focus, top-layer placement, modal inertness, and default Escape behavior.

Ownership and lifetime

Running the Fx owns native listeners, dialog registration, and the NativeDialog observer in its Effect Scope. Finalization removes registration only when it still points at this element. A custom host must preserve native dialog identity, naming props, lifecycle handlers, and exactly one hydration ref owner.

Examples

import { Effect } from "effect"
import * as Dialog from "@typed/ui/Dialog"

const program = Effect.gen(function* () {
  const state = yield* Dialog.makeState()
  return Dialog.Content({
    state,
    id: "confirm",
    label: "Confirm",
    content: "Continue?"
  })
})

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source