{"id":15768162,"url":"https://github.com/thk2b/react-xcontrol","last_synced_at":"2025-03-31T11:20:28.439Z","repository":{"id":57347856,"uuid":"126769832","full_name":"thk2b/react-xcontrol","owner":"thk2b","description":"Subscribe a react component to a controlx controller","archived":false,"fork":false,"pushed_at":"2018-05-11T16:30:39.000Z","size":104,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-04-24T22:21:07.426Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thk2b.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-26T03:43:21.000Z","updated_at":"2018-05-11T16:33:06.000Z","dependencies_parsed_at":"2022-08-28T01:40:25.665Z","dependency_job_id":null,"html_url":"https://github.com/thk2b/react-xcontrol","commit_stats":null,"previous_names":["thk2b/react-controlx"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Freact-xcontrol","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Freact-xcontrol/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Freact-xcontrol/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Freact-xcontrol/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thk2b","download_url":"https://codeload.github.com/thk2b/react-xcontrol/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246457992,"owners_count":20780679,"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-10-04T14:00:33.997Z","updated_at":"2025-03-31T11:20:28.420Z","avatar_url":"https://github.com/thk2b.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"`npm install --save react-xcontrol`\n\n# react-xcontrol\nSubscribe a react component to a controlx controller\n\nThe central idea is that the view (in this case, React Components) is computed based on the state. The view depends on the state and should update whenever the state changes.\n\n# Exports\n```js\nimport ComputedComponent, { Connect } from 'react-xcontrol'\n```\n\n# API\n\n- `ComputedComponent ( Component ) ( controllers, mapState )`\nReturns a class, extending the provided Component, that renders the wrapped component with the result of mapState on the combined state of the controllers. When any of their stores updates, the component also updates with the new mapped state.\nUses the `xcontrol` `Computed` class. Refer to its documentation for more information on parameters.\n\n- `Connect( Component )`\nReturns a `xcontrol.Controller` that updates the component's props whenever the store updates.\n\n- `Computed( Connect ( Component ))( controllers, mapState )`\nThe implementation of `ComputedComponent`.\n\n## Usage\n### Passing stores to components\n```js\nimport ComputedComponent from 'react-xcontrol'\nimport myController from '../controllers/myController'\nimport MyComponent from '../components/MyComponent'\n\n\nexport default ComputedComponent ( MyComponent )({ myController }) \n```\n\nHere, the exported component will recieve a 'myController' prop equal to the controller's state. Whenever the controller's store updates, the component will also re-render.\n\n```js\nconst mapStateToProps = ({ myController }) =\u003e ({ data: myController.relevantData })\n\nexport default ComputedComponent ( MyComponent )({ myController }, mapStateToProps)\n```\nIn this case, the exported component will recieve a `myComponent` prop.\n\n### Causing actions from components\n```js\nimport React from 'react'\nimport myController from '../controllers/myController'\n\nexport default props =\u003e \u003cbutton\n  onClick={e =\u003e myController.someAction()}\n\u003e\n  submit\n\u003c/button\u003e\n```\nActions can simply be embeded into components, without being passed as props. Just call a controller's methods directly from the component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthk2b%2Freact-xcontrol","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthk2b%2Freact-xcontrol","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthk2b%2Freact-xcontrol/lists"}