A teeny tiny reactive stateutility for JavaScript — lighter than a feather (0.5 KB).
Minimal, fun, and only what you really need to make your state reactive.
- 🪶 Super lightweight & minimal
- 🔄 Reactive state with automatic updates
- 📦 Works with objects and arrays
- 🌐 Supports both ESM and UMD (browser <script> ready)
import{reactive,effect}from"teeny-tiny-state";conststate=reactive({count:0});effect(()=>{console.log("Count is:",state.count);});state.count++;// triggers effect -> "Count is: 1"
import{reactive,effect}from"teeny-tiny-state";conststate=reactive({items:[]});effect(()=>{console.log("Items:",state.items.join(", "));});state.items.push("Hello");// Items: Hellostate.items.push("World");// Items: Hello, World
<scriptsrc="./dist/teeny-tiny-state.umd.js"></script><script>const{ reactive, effect}=TeenyTinyState;conststate=reactive({count:0});effect(()=>{document.body.textContent=`Count:${state.count}`;});setInterval(()=>state.count++,1000);</script>
import{reactive,effect}from"teeny-tiny-state";conststate=reactive({count:0});effect(()=>{consttimer=setInterval(()=>{console.log("Tick:",state.count);},1000);return()=>clearInterval(timer);});state.count++;reactive(object)
Wraps an object or array into a reactive proxy.All reads and writes will be tracked automatically.
effect(fn)
Registers a reactive effect function.The function will automatically re-run whenever its dependencies change.