super tiny reactive state inspired by Vue.js
npm install stateme.js
or via CDN:
<script src="https://unpkg.com/stateme.js/lib/stateme.js"></script>import watch from 'stateme.js'
const myCounterProps = {
enabled: true,
count: 0,
title: "My Pomodoro Timer"
}
// only watch the count prop
const state = watch(myCounterProps, [ 'count' ])
state.onUpdate(prop => console.log(`UPDATED { ${prop}: ${state[prop]} }`))
state.count++
// output: UPDATED { count: 1 }Returns an instance of stateme.js, not your original object
| Params | Description |
|---|---|
| originalObject | The object you want to watch. default: {} |
| selectedProps | Optional. Only watch the properties in an array. default: [] |
Connect you reactive value to a DOM input (watch changes).
WARNING: for radio inputs, provide an element with a name atribute. when you set your state, provide the radio option value (like you do for a <select>).
learn more on the demo
usage:
state.connectInput(document.querySelector('input'), ['count'])| Params | Description |
|---|---|
| input | DOM element, the view that will update the model (state) |
Add a callback to trigger before a value update
usage:
state.onBeforeUpdate(prop =>
console.log(`WILL UPDATE { ${prop}: ${state[prop]} }`)
)| Params | Description |
|---|---|
| func | Your callback function . |
| selectedProps | Optional. Only watch the properties in an array. default: [] |
Add a callback to trigger after a value update
state.onUpdate(prop => console.log(`UPDATED { ${prop}: ${state[prop]} }`), ['count])| Params | Description |
|---|---|
| func | Your callback function. |
| selectedProps | Optional. Only watch the properties in an array. default: [] |
state.onDestroy(() =>
console.warn(`${JSON.stringify(state, null, 2)}`, 'DESTROYED')
)Add a callback to trigger when you call the destory() method.
| Params | Description |
|---|---|
| func | Your callback function. |
| selectedProps | Optional. Only watch the properties in an array. default: [] |
Removes all the callbacks registered.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent