signals
Guide
Concepts
Observability
API
Guide
Concepts
Observability
API

Function: bindDOM

vanilla.bindDOM

bindDOM<T>(element, updater): () => void

Binds a DOM element to reactive signals using a custom updater callback.

Type parameters

Name Type Description
T extends Element The type of DOM Element.

Parameters

Name Type Description
element T The native DOM element to update.
updater (el: T) => void Callback receiving the element and executing mutations based on reactive state.

Returns

fn

A dispose function to unbind the reactive effect.

(): void

Returns

void

Remarks

Runs synchronously on registration to apply initial DOM attributes/styles, then automatically re-executes whenever reactive signals or proxy properties read within updater change.

Example

import { bindDOM, makeReactive } from '@banksia/signals/vanilla';

const state = makeReactive({ active: false });
const btn = document.querySelector('button')!;

const unbind = bindDOM(btn, (el) => {
  el.classList.toggle('is-active', state.active);
});

state.active = true; // Button gets 'is-active' class
ON THIS PAGE