@tybalt/reactive
Tybalt's package for reactivity
Installation
Install the parser with your favorite npm client
npm install --save @tybalt/reactive
Usage
To create a new reactive, call the reactive
function with its initial value
import { reactive } from '@tybalt/reactive';
const myReactive = reactive(42);
To attach a new listener to a reactive, use its addListener
method
myReactive.addListener((newValue) => console.log('got a new value:', newValue));
myReactive.value = 'quux'; // logs "got a new value: quux"
When you want to set a new value, update it using the .value
key on the reactive
myReactive.value = 74;
If you would like to create a new reactive that is derived from another reactive, use the derive
function
const myReactive = reactive('hello');
const myDerivedReactive = derive(myReactive, ([value]) => {
return `${value} world`;
});
console.log(myDerivedReactive.value); // logs "hello world"
myReactive.value = 'bonjour';
console.log(myDerivedReactive.value); // logs "bonjour world"
Api
There are two functions exported by reactive currently: reactive
and derive
. Both return a Reactive
, which has two public members, value
and addListener
.
derive
This method is used for creating a new reactive that is automatically updated to match the state of one or more other upstream reactives. It takes as arguments first the reactive or array of reactives that you want to monitor, and then second it takes a callback that is executed every time that one of the upstream reactives changes with the most recent values of all reactives.
import { derive } from '@tybalt/reactive';
const value = 'first half';
const anotherValue = 'second half';
const mockReactive = reactive(value);
const anotherReactive = reactive(anotherValue);
const derivation = derive([mockReactive, anotherReactive], ([firstReactive, secondReactive]) => {
return `${firstReactive.value} + ${secondReactive.value}`;
});
console.log(derivation.value); // logs "first half + second half"
reactive
This method is used for creating a new reactive. It takes as an argument the initial value of the reactive.
import { reactive } from '@tybalt/reactive';
const myReactive = reactive('foo');
console.log(myReactive.value); // logs "foo"
myReactive.value = 'bar';
console.log(myReactive.value); // logs "bar"