ref()

Create a Signal<T | null> that Whisq populates with a DOM element after mount and resets to null on unmount. Pass it as the ref prop on any element and read .value after onMount.

Signature

function ref<T extends HTMLElement = HTMLElement>(): Signal<T | null>;

Returns

A Signal<T | null> that starts at null and is set to the element after mount. Read via .value.

Examples

import { signal, ref, component, input, onMount } from "@whisq/core";

const Focus = component(() => {
  const inputEl = ref<HTMLInputElement>();
  onMount(() => inputEl.value?.focus());
  return input({ ref: inputEl, placeholder: "Autofocused" });
});

Because it’s a regular signal, you can also read it reactively:

import { ref, effect, div } from "@whisq/core";

const el = ref<HTMLDivElement>();
effect(() => {
  if (el.value) console.log("mounted", el.value.getBoundingClientRect());
});
div({ ref: el }, "Hello");

The callback-ref form (a function that receives the element) is also supported on the ref prop, typed as Ref<T> = Signal<T | null> | ((el: T | null) => void).