{"id":21291913,"url":"https://github.com/idea2app/mobx-react-helper","last_synced_at":"2025-08-24T17:47:08.753Z","repository":{"id":191032468,"uuid":"683818062","full_name":"idea2app/MobX-React-helper","owner":"idea2app","description":"MobX helper library for React component engine, with TypeScript Class \u0026 Decorator supports.","archived":false,"fork":false,"pushed_at":"2024-01-29T18:11:08.000Z","size":91,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T20:02:55.864Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://idea2app.github.io/MobX-React-helper/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/idea2app.png","metadata":{"files":{"readme":"ReadMe.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-08-27T19:44:08.000Z","updated_at":"2024-03-19T14:43:12.000Z","dependencies_parsed_at":"2024-01-29T18:58:23.931Z","dependency_job_id":"e649f9e2-d8db-490b-be01-3feab3c313aa","html_url":"https://github.com/idea2app/MobX-React-helper","commit_stats":null,"previous_names":["idea2app/mobx-react-helper"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FMobX-React-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FMobX-React-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FMobX-React-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FMobX-React-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idea2app","download_url":"https://codeload.github.com/idea2app/MobX-React-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225741250,"owners_count":17516895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T13:46:45.396Z","updated_at":"2025-07-11T16:31:06.030Z","avatar_url":"https://github.com/idea2app.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## MobX React helper\n\n[MobX][1] helper library for [React][2] component engine, with [TypeScript][3] Class \u0026 Decorator supports.\n\n[![MobX compatibility](https://img.shields.io/badge/Compatible-1?logo=mobx\u0026label=MobX%206%2F7)][1]\n[![NPM Dependency](https://img.shields.io/librariesio/github/idea2app/MobX-React-helper.svg)][4]\n[![CI \u0026 CD](https://github.com/idea2app/MobX-React-helper/actions/workflows/main.yml/badge.svg)][5]\n\n[![NPM](https://nodei.co/npm/mobx-react-helper.png?downloads=true\u0026downloadRank=true\u0026stars=true)][6]\n\n## Versions\n\n| SemVer  |    status    |      ES decorator      |    MobX     |\n| :-----: | :----------: | :--------------------: | :---------: |\n| `\u003e=0.4` | ✅developing | stage-3 (internal use) |  `\u003e=6.11`   |\n| `0.3.x` | ❌deprecated |        stage-3         |  `\u003e=6.11`   |\n| `\u003c0.3`  | ❌deprecated |        stage-2         | `\u003e=4 \u003c6.11` |\n\n## Usage\n\n### Installation\n\n```shell\nnpm i mobx react \\\n    mobx-react \\\n    mobx-react-helper\n```\n\n### Configuration\n\n#### `tsconfig.json`\n\nCompatible with MobX 6/7:\n\n```json\n{\n    \"compilerOptions\": {\n        \"target\": \"ES6\",\n        \"moduleResolution\": \"Node\",\n        \"useDefineForClassFields\": true,\n        \"experimentalDecorators\": false,\n        \"jsx\": \"react-jsx\"\n    }\n}\n```\n\n### Observable Props, State \u0026 Context\n\n#### `source/index.tsx`\n\n```tsx\nimport { createRoot } from 'react-dom/client';\n\nimport { MyComponent } from './Component';\nimport { session, MyContext } from './store';\n\ncreateRoot(document.body).render(\n    \u003cMyContext.Provider value={session}\u003e\n        \u003cMyComponent /\u003e\n    \u003c/MyContext.Provider\u003e\n);\n```\n\n#### `source/store.ts`\n\n```tsx\nimport { createContext } from 'react';\n\nexport const session = { email: 'tech-query@idea2.app' };\n\nexport const MyContext = createContext(session);\n```\n\n#### `source/Component.tsx`\n\n```tsx\nimport { computed } from 'mobx';\nimport { observer } from 'mobx-react';\nimport { ObservedComponent } from 'mobx-react-helper';\n\nimport { session } from './store';\n\nexport type MyComponentProps = { prefix: string };\n\ntype State = { text: string };\n\n@observer\nexport class MyComponent extends ObservedComponent\u003c\n    MyComponentProps,\n    { email: string },\n    State\n\u003e {\n    state: Readonly\u003cState\u003e = { text: '' };\n\n    @computed\n    get decoratedText() {\n        return (\n            this.observedProps.prefix +\n            this.observedState.text +\n            this.observedContext.email\n        );\n    }\n\n    render() {\n        return \u003cp\u003e{this.decoratedText}\u003c/p\u003e;\n    }\n}\n```\n\n### Observable Reaction decorator\n\n```tsx\nimport { observable } from 'mobx';\nimport { observer } from 'mobx-react';\nimport { ObservedComponent, reaction } from 'mobx-react-helper';\n\n@observer\nexport class MyComponent extends ObservedComponent {\n    @observable\n    accessor count = 0;\n\n    componentDidMount() {\n        super.componentDidMount();\n        // Super method call is required if you have more \"did mount\" logic below\n        // Your logic is here...\n    }\n\n    componentWillUnmount() {\n        super.componentWillUnmount();\n        // Super method call is required if you have more \"will unmount\" logic below\n        // Your logic is here...\n    }\n\n    @reaction(({ count }) =\u003e count)\n    handleCountChange(newValue: number, oldValue: number) {\n        console.log(`Count changed from ${oldValue} to ${newValue}`);\n    }\n\n    render() {\n        return (\n            \u003cbutton onClick={() =\u003e this.count++}\u003eUp count {this.count}\u003c/button\u003e\n        );\n    }\n}\n```\n\n### Abstract Form component\n\n```tsx\nimport { observer } from 'mobx-react';\nimport { FormComponent } from 'mobx-react-helper';\n\n@observer\nexport class MyField extends FormComponent {\n    render() {\n        const { onChange, ...props } = this.props,\n            { value, handleChange } = this;\n\n        return (\n            \u003c\u003e\n                \u003cinput\n                    {...props}\n                    onChange={({ currentTarget: { value } }) =\u003e\n                        (this.innerValue = value)\n                    }\n                /\u003e\n                \u003coutput\u003e{value}\u003c/output\u003e\n            \u003c/\u003e\n        );\n    }\n}\n```\n\n## User case\n\n1. Super Table \u0026 Form: https://github.com/idea2app/MobX-RESTful-table\n2. React Bootstrap extra: https://github.com/idea2app/Idea-React\n3. Open Street Map: https://github.com/idea2app/OpenReactMap\n\n[1]: https://mobx.js.org/\n[2]: https://react.dev/\n[3]: https://www.typescriptlang.org/\n[4]: https://libraries.io/npm/mobx-react-helper\n[5]: https://github.com/idea2app/MobX-React-helper/actions/workflows/main.yml\n[6]: https://nodei.co/npm/mobx-react-helper/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidea2app%2Fmobx-react-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidea2app%2Fmobx-react-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidea2app%2Fmobx-react-helper/lists"}