TL;DR
- Install and write a model class.
- Use
useModelto create/subscribe in React. - Use
providefor shared instances.
1) Install
pnpm add @e7w/easy-model
2) Create a model
class TodoModel {
items: string[] = [];
add(text: string) {
this.items.push(text);
}
remove(index: number) {
this.items.splice(index, 1);
}
}
3) Use it in a component
import { useModel } from "easy-model";
function TodoList() {
const todo = useModel(TodoModel, []);
return (
<div>
<button onClick={() => todo.add("new item")}>Add</button>
<ul>
{todo.items.map((it, i) => (
<li key={i} onClick={() => todo.remove(i)}>
{it}
</li>
))}
</ul>
</div>
);
}
This is the core workflow: model-first design with minimal React glue. If you already model business logic with classes, easy-model makes state feel natural.
GitHub: easy-model
npm: @e7w/easy-model