Search documentation

Search by topic, API name, or import path.

GitHub ↗

function / @typed/ui/index

Dom.mergeProps

Merges user host props with component-required internal props.

Learn this UI primitive →

Package version
1.0.0-beta.7
Category
Prop composition
Since
1.0.0
Member of
Dom

Import

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

Access Dom.mergeProps through the imported Dom 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 mergeProps<const User extends object | undefined, const Internal extends object>(user: User, internal: Internal): MergedHostProps<User, Internal>;

Why

Internal accessibility/state props must remain authoritative, but user events still run first and may cancel component behavior. Disabled hosts suppress user activation handlers. Refs compose instead of overwriting one another.

Ownership and lifetime

The function allocates only a merged object. Listener and ref effects are run by the eventual template Scope. composeRefs rejects two hydration owners because one element can restore only one hydration protocol.

Examples

import { mergeProps } from "@typed/ui/Dom/Props"
import { EventHandler } from "@typed/template"
import { Effect } from "effect"

const props = mergeProps(
  {
    class: "external",
    onclick: EventHandler.make(() => Effect.log("user activation"))
  },
  { role: "button", "aria-disabled": false }
)

Other public imports

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

Source