mst-use-observable

A way to use MobX-State-Tree without observer Higher Order Components. This hook makes MST compatible with the React Compiler. MST stays reactive and type safe.

Video introduction

Original demo repo with Remix

Installation

npm install mst-use-observable

Usage

import { t } from "mobx-state-tree";
import { useObservable } from "mst-use-observable";

const RootStoreModel = t
  .model("RootStoreModel", {
    count: t.number,
  })
  .actions((self) => ({
    increment() {
      self.count += 1;
    },
    decrement() {
      self.count -= 1;
    },
  }));

const store = RootStoreModel.create({ count: 0 });

export default function App() {
  const { count } = useObservable(store);

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={store.increment}>+</button>
      <button onClick={store.decrement}>-</button>
    </div>
  );
}

Development

Built with Bun. PRs welcome, especially if they include new test cases and docs.

Install dependencies

bun install

Run tests

bun test

Build

bun run build

Type Check

bun run typecheck

Linting and Prettier

bun run lint # ESLint
bun run format # Prettier write