Skip to content

Nano library for functional, opt-in reactive programming

License

Notifications You must be signed in to change notification settings

jsheaven/reactive

Repository files navigation

@jsheaven/reactive

Nano library for functional, opt-in reactive programming

User Stories

  1. As a developer, I (sometimes) want a function to re-run when the data that it depends on, changes

Features

  • ✅ Makes Functions reactive so that they re-run when data in reactive objects they use, changes
  • ✅ Makes Objects reactive so that when values in them are changed, reactive Functions re-run
  • ✅ Available as a simple API
  • ✅ Just 397 byte nano sized (ESM, gizpped)
  • ✅ Tree-shakable and side-effect free
  • ✅ One @jsheaeven dependency: @jsheaven/observed
  • ✅ First class TypeScript support
  • ✅ 100% Unit Test coverage

Example usage

Setup

  • yarn: yarn add @jsheaven/reactive
  • npm: npm install @jsheaven/reactive

ESM

import { reactive, on } from '@jsheaven/reactive'

const state = reactive({ rand: 0 })
const otherState = reactive({ rand: 0 })

reactive(() => {
  // using state.rand makes this function re-run when setInterval changes it
  console.log('Next random value', on(state.rand))

  // but using a state like otherState.rand, that isn't maked for reactivity, will never trigger
  console.log('Prev random value (lags behind)', otherState.rand)
})

let i = 0
const interval = setInterval(() => {
  state.rand = otherState.rand // this mutation causes the reactive function to re-run
  otherState.rand = Math.random() // this however, is numb

  if (i === 9) {
    clearInterval(interval) // stops re-running the reactive function
  }
}, 1000)

CommonJS

const { reactive, on } = require('@jsheaven/reactive')

// same API like ESM variant