mobx-react-observer v1.0.2

mobx-react-observer

Automatic React observer for Mobx

npm install mobx-react-observer

Read more about automatic observation in observing-components.

Babel plugin example

import observerPlugin from "mobx-react-observer/babel-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [observerPlugin()],
      },
    }),
  ],
});

SWC plugin example

import observerPlugin from "mobx-react-observer/swc-plugin";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [
    react({
      plugins: [observerPlugin()],
    }),
  ],
});

You can now just consume Mobx from any component.

import { observable } from "mobx";

const counter = observable({
  count: 0,
  increase() {
    counter.count++;
  },
});

function Counter() {
  return (
    <button
      onClick={() => {
        counter.increase();
      }}
    >
      Count {counter.count}
    </button>
  );
}