{"library":"mobx-react","title":"MobX React Bindings","description":"mobx-react provides the official React bindings for MobX, enabling the creation of fully reactive React components that automatically re-render when the observable data they consume changes. The current stable version is 9.2.1, which includes support for React 19 and MobX 6.x. This package offers a complete integration, including support for class-based components, the legacy `Provider`/`inject` mechanism, and `PropTypes` utilities for observable-based property checkers. It differentiates itself from `mobx-react-lite` by offering these additional features for existing codebases or specific architectural needs, whereas `mobx-react-lite` is optimized for modern functional components and Hooks with `React.createContext`. Releases often align with new React and MobX versions, providing timely compatibility updates and bug fixes.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install mobx-react"],"cli":null},"imports":["import { observer } from 'mobx-react';","import { Provider } from 'mobx-react';","import { inject } from 'mobx-react';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { makeAutoObservable } from 'mobx';\nimport { observer } from 'mobx-react';\n\nclass TimerStore {\n  secondsPassed = 0;\n\n  constructor() {\n    makeAutoObservable(this);\n    setInterval(() => {\n      this.secondsPassed++;\n    }, 1000);\n  }\n\n  reset() {\n    this.secondsPassed = 0;\n  }\n}\n\nconst myTimer = new TimerStore();\n\nconst TimerDisplay = observer(() => {\n  return (\n    <div>\n      <p>Seconds passed: {myTimer.secondsPassed}</p>\n      <button onClick={() => myTimer.reset()}>Reset Timer</button>\n    </div>\n  );\n});\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(\n  <React.StrictMode>\n    <TimerDisplay />\n  </React.StrictMode>\n);\n","lang":"typescript","description":"Demonstrates creating a MobX observable store and rendering it in a reactive functional React component using the `observer` HOC.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}