xsig

A very tiny reactive library, highly inspired by Reactively.

• Signals-based observers
• Only 0.5kb (minified and brotlied)
• Fine grained updates (updates only when necessary)
• Lazy-first computeds
• Auto dependency tracking via transparent reactivity
• Glitch-free
• Hybrid sync/scheduled effects
• Scoped effects (dispose nested computations)

Install

npm install xsig

Example

import { signal, computed, effect } from "xsig";

// A "data source".
const number = signal(1);

// A "computed" that executes only when `double.value` is read.
const double = computed(() => number.value * 2);

// An "effect" that executes only if `double` changes.
const dispose = effect(() => {
  console.log("double is: " + double.value);
  return () => {
    /* clean up code if needed */
  };
});

// does nothing yet
number.value = 0;
number.value = 2;

// To stop an effect later just call it
setTimeout(() => {
  dispose();
}, 5000);

// At end it logs "double is: 4".