Import
import { ref } from "@typed/ui/NativeDetails";Signatures
export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>): (element: HTMLDetailsElement) => Effect.Effect<void, E, R | Scope.Scope>;Why
<details> already owns disclosure rendering and keyboard behavior. This ref
only applies pushed open state to that real element; the public Disclosure
component listens to native toggle events for the reverse direction.
Ownership and lifetime
Applying the ref forks one observer in the current Effect Scope. Scope finalization interrupts it; the state remains owned by its original Scope and the DOM element remains owned by its renderer. Use only one hydration ref owner for an element.
Examples
import { Effect } from "effect"
import * as Disclosure from "@typed/ui/Disclosure"
import * as NativeDetails from "@typed/ui/NativeDetails"
const program = Effect.gen(function* () {
const state = yield* Disclosure.makeState()
return NativeDetails.ref(state)
})