✨ Simple, zero dependency, observable value container. ✨
npm install @jonasrottmann/livedataLiveDataLiveData is a very small observable value container targeted at small apps. The goal is to make observing app state as easy as possible.
Install via npm/yarn:
``shell
npm install @jonasrottmann/livedata
yarn add @jonasrottmann/livedata
`
For a simple counter example check out counter.html or explore on CodePen.
> 🚧 This documentation is work in progress...
`javascript
import {LiveData} from '@jonasrottmann/livedata'
// Create a new observable container with the initial value true
const livedata = new LiveData(true);
// Register an observer
const unsubscribe = livedata.subscribe((newValue, oldValue) => {
console.log(Value changed from ${oldValue} to ${newValue}!)
})
// Change the value depending on the old value
livedata.transition(value => !value)
// Set the value
livedata.set(true)
// End the subscription
unsubscribe()
`
LiveData additionally can receive two callbacks onActive and onInactive, which will be called when the first observer is added or the last one removed. This can be useful for adding/removing event listeners to modify the LiveDatas value.
`javascript`
const listener = e => keyboardLiveData.set(e)
const keyboardLiveData = new LiveData(
undefined,
// onActive
() => window.addEventListener('keyup', listener),
// onInactive
() => window.removeEventListener('keyup', listener)
)
keyboardLiveData will start listening to keyboard presses as soon as the first observer calls subscribe` and will stop when the last observer has been removed.