Skip to content

alinnert/reactive-value

Repository files navigation

@alinnert/reactive

This is a library for reactive values.

The implementation is based on CustomEvent and EventTarget which are available in the Browser and recent server runtimes like Node.js 19 and Deno.

The API is heavily inspired by Recoil but this library is framework agnostic.

Examples

Mutable values

const numberValue = mutableValue(1)

console.log(numberValue.value)

numberValue.onChange((numberVal) => {
  console.log(numberVal)
})

Computed values

const numberValue = mutableValue(1)
const doubleValue = computedValue([numberValue], (num) => num * 2)

console.log(doubleValue.value)

doubleValue.onChange((doubleVal) => {
  console.log(doubleVal)
})

Automated values

const intervalValue = automatedValue((next) => {
  let v = 0
  
  setInterval(() => {
    next(i++)
  }, 1000)
})

console.log(intervalValue.value)

intervalValue.onChange((intervalVal) => {
  console.log(intervalVal)
})