State Watcher
A light-weight local browser state build on the subscriber pattern.
Install
$ yarn add state-watcher
Usage
import createState from 'state-watcher';
const [state, watcher] = createState({
playerName: '',
score: 0,
});
watcher.on('change', ['score'], (state, score) => {
document.getElementById('score-container').innerText = score;
});
watcher.on('change', ['playerName'], (state, name) => {
document.getElementById('player-name-container').innerText = name;
});
function updatePlayerScore(score) {
state.score = score;
}
function updatePlayerName({ target }) {
state.playerName = target.value || '';
}API
createState(obj)
Returns a tuple with the state object and a watcher.
obj
Type: object
Default: {}
A plain-old JavaScript object that will serve as the default state.
watcher
Type: object
An object containing an on, has, and keys method.
on(type, ?fields, cb)
type
Type: string
A string that indicates which event should be subscribed to on the watcher. Currently only "change" is supported.
fields
Type: Array<string>
Optional: ✅
An array of strings indicating which field(s) the callback should subscribe to on the specified event. When no fields are passed in, all fields for the given event will fire the callback.
cb(state, value, key)
Type: function
A callback that is fired when an event of type occurs to the specified (or all) fields.