LiveData

✨ Simple, zero dependency, observable value container. ✨

LiveData is a very small observable value container targeted at small apps. The goal is to make observing app state as easy as possible.

🧰 Install

Install via npm/yarn:

``shell
npm install @jonasrottmann/livedata

yarn add @jonasrottmann/livedata
`

👩‍💻 Usage

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.

👨‍⚖️ License

MIT