Namespace RxUi

Binds source to one or more element(s). One or more bindings for the same source can be provided.

Updates a HTML element based on diffs on an object.

// Wrap an object
const o = Rx.object({ name: `Jane`, ticks: 0 });
const b = bindDiffUpdate(`#test`, o, (diffs, el) => {
 // el = reference to #test
// diff = Array of Changes, 
//  eg [ { path: `ticks`, value: 797, previous: 0 } ]
 for (const diff of diffs) {
   if (diff.path === `ticks`) el.textContent = `${diff.previous} -> ${diff.value}`
 }

Copy

Update a DOM element's field, attribute or CSS variable when source produces a value.

Updates an element's innerHTML when the source value changes

Updates an element's textContent when the source value changes.

Calls updater whenever source produces a value. Useful when several fields from a value are needed to update an element.

Updates an element's value (as well as the 'value' attribute) when the source value changes.s

Observe when element resizes. Specify interval to debounce, uses 100ms by default.

Observe when a class changes on a target element, by default the document. Useful for tracking theme changes.

Listens for data changes from elements within a HTML form element. Input elements must have a 'name' attribute.

A stream of values when the a HTMLInputElement changes. Eg a

Reactive getting/setting of values to a HTML INPUT element.

Creates, updates & deletes elements based on pathed values from a reactive.

Reactive stream of array of elements that match query.

Returns an Reactive for window resize. Default 100ms debounce.