![](\"http://infernojs.org/img/inferno.png\")
\r\n + \r\n![](\"https://raw.githubusercontent.com/mobxjs/mobx/master/docs/mobx.png\")
\r\n + \r\n\r\n
\r\n
\r\n\r\n
\r\n\r\n + \r\n\r\n + \r\n\r\n
\r\n\r\nSuper lightweight (2 kb uncompressed) [MobX](https://github.com/mobxjs/mobx) `@connect` decorator for react/inferno components.\r\nSimilar to `@connect` from react-redux.\r\n\r\n## Installation\r\n\r\n npm install --save mobx-connect\r\n\r\n\r\n## How it works\r\n\r\nBy decorating your react/inferno component with `@connect` 2 things happen:\r\n\r\n+ Your components becomes observable (so no need to define @observable, since @connect does it for you).\r\n+ Your state and the store actions are inject into `this.context`.\r\n\r\n\r\n## Usage example (React.JS)\r\n\r\n```javascript\r\nimport React from 'react'\r\nimport { connect } from 'mobx-connect'\r\n\r\n@connect\r\nclass App extends React.Component {\r\n\r\n toggleSetting(key) {\r\n const { settings} = this.context.state\r\n settings[key] = !settings[key]\r\n }\r\n\r\n render() {\r\n const { settings } = this.context.state\r\n\r\n return
Fullscreen: {settings.fullscreen ? 'OFF' : 'ON'}
\r\nLogger: {settings.fullscreen ? 'OFF' : 'ON'}
\r\n