Link in bio towidgets,your onlinehome screen. ➫🔗 kee.so

The simplest React state manager.Auto on-demand re-render ⚡️

ReactiveElegantSharedStoreObject

(Support React 18, React Native, SSR, Mini Apps)

English ·简体中文

Introduction

Features

Demo

Install

pnpm add resso# oryarn add resso# orbun add resso# ornpm i resso

Usage

importressofrom'resso';conststore=resso({count:0,text:'hello',inc(){const{ count}=store;// must destructure at top (if use in method)store.count=count+1;},});functionApp(){const{ count}=store;// must destructure at top (if use in UI)return(<>{count}<buttononClick={()=>(store.count+=1)}>+</button></>);}

API

store.count=60;store('count',(c)=>c+1);

store({count:60,text:'world',});store((s)=>({count:s.count+1,text:s.text==='hello' ?'world' :'hello',}));

// store.jsexportconstrefs={total:0,};// App.jsimportstore,{refs}from'./store';functionApp(){refs.total=100;return<div/>;}

resso.config({batch:ReactDOM.unstable_batchedUpdates});// at app entry

Re-render on demand

// no text update, no re-renderfunctionText(){const{ text}=store;return<p>{text}</p>;}// only when count updates, re-renderfunctionCount(){const{ count}=store;return<p>{count}</p>;}// no state in UI, no re-renderfunctionControl(){return(<><buttononClick={store.inc}>+</button><buttononClick={()=>(store.count-=1)}>-</button></>);}

License