element-ref

Capture a template element through a function ref.


Package	`@vizejs/composable/element-ref`
Own the source	`vize lib pull composable:element-ref`
Runtime exports	`useElementRef`
Gzip budget	1280 B

Usage

import { useElementRef } from "@vizejs/composable/element-ref";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useElementRef`	dom	experimental	safe	stable	none	web, server, worker, native, desktop, terminal	—	`resolveElement`

API

`useElementRef`

Capture a template element through a function ref. An instance-free alternative to "current element" helpers: it never reads getCurrentInstance(), so it works in Vapor components, render functions, and plain effect scopes. Inside a component the element is published after mounting (Vapor sets function refs during render), keeping hydration stable. Component refs are unwrapped to their root element, and an optional guard narrows the element type (elements failing it resolve to null). The ref is null during server rendering.

function useElementRef(): ElementRefControls<Element>

`useElementRef`

Capture a template element narrowed by a type guard.

function useElementRef<TargetElement extends Element>( guard: (element: Element) => element is TargetElement, ): ElementRefControls<TargetElement>

`useElementRef`

function useElementRef(guard?: (element: Element) => boolean): ElementRefControls<Element>

Types

`ElementRefControls`

State returned by useElementRef.

Member	Type	Description
`element`	`Readonly<ShallowRef<TargetElement \| null>>`	Resolved element (component roots are unwrapped); `null` while unmounted.
`setRef`	`ElementRefSetter`	Bind with `:ref="setRef"` on an element or component.