Link in bio to widgets, your online home screen. ➫ 🔗 kee.so

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

Reactive Elegant Shared Store Object

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

npm GitHub Workflow Status npm bundle size npm type definitions GitHub

English · 简体中文

Introduction

Features

Demo

Install

pnpm add resso
# or
yarn add resso
# or
bun add resso
# or
npm i resso

Usage

import resso from 'resso';
const store = resso({
 count: 0,
 text: 'hello',
 inc() {
 const { count } = store; // must destructure at top (if use in method)
 store.count = count + 1;
 },
});
function App() {
 const { count } = store; // must destructure at top (if use in UI)
 return (
 <>
 {count}
 <button onClick={() => (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.js
export const refs = {
 total: 0,
};
// App.js
import store, { refs } from './store';
function App() {
 refs.total = 100;
 return <div />;
}

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

Re-render on demand

// no text update, no re-render
function Text() {
 const { text } = store;
 return <p>{text}</p>;
}
// only when count updates, re-render
function Count() {
 const { count } = store;
 return <p>{count}</p>;
}
// no state in UI, no re-render
function Control() {
 return (
 <>
 <button onClick={store.inc}>+</button>
 <button onClick={() => (store.count -= 1)}>-</button>
 </>
 );
}

License