Function external

Creates a signal that integrates state from 'foreign' objects (e.g. different state management solutions) into the reactivity system.

The compute function should return the current value from the foreign object. Just like with computed objects, the return value of compute will be cached. Unlike computed objects, the compute function will not be triggered automatically: you must subscribe to changes on the foreign object (with whatever API is appropriate) and call the returned ExternalReactive's trigger() method.

Once .trigger() has been called, accessing the reactive object's value will re-execute the compute method and return the latest value.

Example:

// This example makes the state of an AbortSignal accessible as an reactive object.
const controller = new AbortController();
const signal = controller.signal;

const aborted = external(() => signal.aborted);
signal.addEventListener("abort", aborted.trigger);
console.log(aborted.value); // false

controller.abort(); // triggers the event handler registered above
console.log(aborted.value); // true

// later: unsubscribe from signal
Copy