@jsheaven/reactive
v1.0.0
Published
Nano library for functional, opt-in reactive programming
Downloads
7
Readme
Nano library for functional, opt-in reactive programming
- As a developer, I (sometimes) want a function to re-run when the data that it depends on, changes
- ✅ Makes
Function
s reactive so that they re-run when data in reactive objects they use, changes - ✅ Makes
Object
s reactive so that when values in them are changed, reactiveFunctions
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
- yarn:
yarn add @jsheaven/reactive
- npm:
npm install @jsheaven/reactive
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)
const { reactive, on } = require('@jsheaven/reactive')
// same API like ESM variant