@jsheaven/reactive
Nano library for functional, opt-in reactive programming
User Stories
- As a developer, I (sometimes) want a function to re-run when the data that it depends on, changes
Features
✅ MakesFunction
s reactive so that they re-run when data in reactive objects they use, changes✅ MakesObject
s reactive so that when values in them are changed, reactiveFunctions
re-run✅ Available as a simple API✅ Just397 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