Search documentation

Search by topic, API name, or import path.

GitHub ↗

function / @typed/ui

Disclosure.Content

Renders native details 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
Disclosure

Import

import { Disclosure } from "@typed/ui";

Access Disclosure.Content through the imported Disclosure 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

Native disclosure behavior, semantics, and toggle events stay intact while Effect state can control or observe visibility.

Ownership and lifetime

Running the Fx owns the native listener and scoped observer. A custom host must preserve the toggle handler and exactly one composed hydration ref.

Examples

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

const program = Effect.gen(function* () {
  const state = yield* Disclosure.makeState()
  return Disclosure.Content({
    state,
    content: Disclosure.Button({ content: "More" })
  })
})

Other public imports

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

Source