Creating

Module Rx.From collects functions for creating a reactive source.

Basic values

From.boolean , From.number , From.string are writable reactives for basic types.

const rx = Rx.From.boolean(true);
rx.onValue(v => {
  // Handle when value changes
});

rx.set(false); // Set value to 'false', triggering onValue

Tip

These reactives only emit a value when it is different than the last.

Arrays

From.array reads individual values from an array with a given interval between values. It is non-writable, and works with a snapshot of the array, so it doesn’t pick up on changes to the array after it is created.

const data = [`apples`, `oranges`, `pears` ];
const rx = Rx.From.array(data);
rx.onValue(v => {
 // v will be each fruit in turn
});

It is a finite reactive (since arrays themselves are finite). Read the isDone property to check if it has completed.

From.arrayObject wraps a source array and emits the whole array. It provides a set of functions for manipulating the array such that changes will be properly emitted to subscribers.

const myData = [`apples`,`oranges`,`pears`];
const rx = Rx.From.arrayObject(myData);
rx.onValue(v => {
  // v will be the whole array, whenever it changes
})

// Will trigger onValue with: [`apples`, `mangoes`, `pears`]
rx.setAt(1, `mangoes`);

Events

From.event emits data from events, typically for user interaction events.

It’s created from an event target and event name. The event target can be an HTML element or query, such as “#someEl”.

const pointermove = Rx.From.event(document, `pointermove`);
pointermove.onValue(v => {
  // Pointer move happens.
})

An initial value should be provided. This improves the typing of the return reactive and allows you to immediately use the .last property, before the event fires.

// Listen for `pointermove` events, with an empty point as the initial value
const pointermove = Rx.From.event(document, `pointermove`, { x:0, y:0 });
pointermove.last(); // Get last value

From.eventField works similarly, but allows you to specify a single field name to pluck from the event object.

const pointerX = Rx.From.eventField(document, `pointermove`, `x`, 0);
pointerX.last(); // Read last x position of pointer

Functions

From.func emits values by calling a function at a given interval.

// Emit a random number every second
const rx = Rx.From.func(Math.random, { interval: 1000 });

The reactive can be limited with the maximumRepeats option (to set total number of values emitted), using an abort signal, or calling the provided abort function.

const rx = Rx.From.func(abort => {
  // Decide to randomly stop the reactive
  if (Math.random() > 0.5) abort(`Random exit`);
  // ...or emit a random value
  return Math.random();
}, { interval: 1000 }); // every second

If you don’t specify an interval (or manual: true is specified), it will be in manual mode. It won’t call the provided function (and thus emit a value) unless the source is pinged.

const rx = Rx.From.func(Math.random, { manual: true });
rx.ping(); // Trigger the function to be called and for 'rx' to emit a value.

Iterables

Reactives can be made from async or synchronous iterators/generators with From.iterator .

// A generator of random values every 5 seconds
const valuesOverTime = Flow.interval(() => Math.random(), 5000);

// Create a reactive with this as a source
const r = Rx.From.iterator(valuesOverTime);

// Get notified when there is a new value
r.onValue(v => {
  console.log(v);
});