function / @typed/ui/Dom/index

composeRefs

Composes two element refs in order.

Learn this UI primitive →

Package version
1.0.0-beta.7
Category
Ref composition
Since
1.0.0

Import

import { composeRefs } from "@typed/ui/Dom/index";

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 composeRefs<const First extends RefInput | null | undefined, const Second extends RefInput | null | undefined = undefined>(first: First, second?: Second): ComposedRef<First, Second> | undefined;

Why

A component’s internal ref and a caller’s ref both need the real mounted node. Each return value may be void, Effect, Stream, or Fx, and composition normalizes those forms without hiding failures or services.

Ownership and lifetime

The first ref runs before the second. Streams and Fx values are drained in the caller’s Scope and interrupted on unmount. The function throws synchronously when both refs claim hydration ownership because applying two serialized states to one element is ambiguous.

Examples

import { composeRefs } from "@typed/ui/Dom/Refs"
import { Effect } from "effect"

const ref = composeRefs(
  (element: HTMLButtonElement) => Effect.sync(() => element.focus()),
  (element: HTMLButtonElement) => console.log(element)
)

Other public imports

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

Source