Automatic React observer for Mobx
npm install mobx-react-observerAutomatic React observer for Mobx
Will wrap all components in your project (not libraries from node_modules) in the observer, making observation completely transparent with Mobx. Other benefits:
- You can now export functions as normal and they show up with the correct name in React Devtools
- When exporting with export const Comp = observer() VSCode will read that as two definitions of the component, affecting "jump to definition". Now there is only one definition for every component
- Instead of having multiple ways to observe, just create smaller components to optimize rendering
Read more about automatic observation in observing-components.
``sh`
npm install mobx-react-observer
If you do server side rendering (SSR), the plugins will still work, but as always you should use enableStaticRendering , for example:
App.tsx
`ts
import { enableStaticRendering } from "mobx-react-observer";
enableStaticRendering(typeof window === "undefined");
`
Babel plugin example
`ts
import observerPlugin from "mobx-react-observer/babel-plugin";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
observerPlugin(
// optional
{ exclude: ["src/ui-components/**"] }
),
],
},
}),
],
});
`
SWC plugin example
`ts
import observerPlugin from "mobx-react-observer/swc-plugin";
import react from "@vitejs/plugin-react-swc";
export default defineConfig({
plugins: [
react({
plugins: [
observerPlugin(
// optional
{ exclude: ["src/ui-components/**"] }
),
],
}),
],
});
`
You can now just consume Mobx from any component.
`tsx
import { observable } from "mobx";
const counter = observable({
count: 0,
increase() {
counter.count++;
},
});
function Counter() {
return (
onClick={() => {
counter.increase();
}}
>
Count {counter.count}
);
}
``