{"id":19396043,"url":"https://github.com/zxbodya/rx-react-container","last_synced_at":"2025-04-24T05:30:51.644Z","repository":{"id":2782509,"uuid":"47440049","full_name":"zxbodya/rx-react-container","owner":"zxbodya","description":"Use RxJS in React components, via HOC or Hook","archived":false,"fork":false,"pushed_at":"2023-01-04T21:49:42.000Z","size":2327,"stargazers_count":108,"open_issues_count":18,"forks_count":11,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-17T06:44:23.102Z","etag":null,"topics":["hoc","hooks","observable","react","rx","rxjs"],"latest_commit_sha":null,"homepage":"","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/zxbodya.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-05T03:13:34.000Z","updated_at":"2024-12-20T21:44:37.000Z","dependencies_parsed_at":"2023-01-13T12:45:13.337Z","dependency_job_id":null,"html_url":"https://github.com/zxbodya/rx-react-container","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zxbodya%2Frx-react-container","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zxbodya%2Frx-react-container/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zxbodya%2Frx-react-container/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zxbodya%2Frx-react-container/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zxbodya","download_url":"https://codeload.github.com/zxbodya/rx-react-container/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250572141,"owners_count":21452325,"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":["hoc","hooks","observable","react","rx","rxjs"],"created_at":"2024-11-10T10:33:21.580Z","updated_at":"2025-04-24T05:30:51.410Z","avatar_url":"https://github.com/zxbodya.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Rx React Container \n\n[![Build Status](https://travis-ci.org/zxbodya/rx-react-container.svg?branch=master)](https://travis-ci.org/zxbodya/rx-react-container)\n[![codecov.io](https://codecov.io/github/zxbodya/rx-react-container/coverage.svg?branch=master)](https://codecov.io/github/zxbodya/rx-react-container?branch=master)\n\nHelper utilities allowing to transparently connect RxJS logic to React Component.\n\nWorks by wrapping React Component into container that:\n\n - provides access to props passed to it as observables (both individual, and combinations - see details below)\n - renders wrapped component with data form observable created in controller\n - provides utility to combine observables, observers and static props into one observable of props to be rendered\n\nIf you are interested in history behind this - look at [gist about it](https://gist.github.com/zxbodya/20c63681d45a049df3fc).\n\nFirst project where it was used: [reactive-widgets](https://github.com/zxbodya/reactive-widgets)\n\n### Installation\n\n`npm install rx-react-container --save`\n\n### Usage\n\nCurrently there are two ways of using it:\n - with high order components\n - with hooks\n\nHigh order components:\n\n```ts\nconst ContainerComponent = connect(\n  controller: (propsHelper) =\u003e Observable\u003cResultProps\u003e\n)(WrappedComponent)\n```\n\nHooks:\n\n*Warning: hooks version is very new, consider it experimental*\n\n```ts\nconst resultProps = useRxController(\n  controller: (propsHelper) =\u003e Observable\u003cResultProps\u003e,\n  props\n);\n```\n\nIn theory, both are equivalent, while hooks one is more compact/flexible.\n\nIn both cases `controller` is function creating observable of properties to be rendered.\n\n`propsHelper` argument of it provides few helper methods to access props as observables:\n\n- `getProp(name)` - returning observable of distinct values of specified property\n- `getProps(...names)` - returning observable of distinct arrays of values for specified properties\n\nalso there are fields with current properties(in some cases this is useful, but generally - better to use helper methods above):\n\n- `props$` - observable with current properties \n- `props` -  getter to get current properties of wrapper component, or what was passed to hook when rendering\n\nTo help combining various things into result observable, library also provides helper function to combine data into single observable:\n\n`combineProps(observables, observers, otherProps)` \n\nWhere:\n\n- `observables` object with observables with data for component\n- `observers` object with observers to be passed as callbacks to component \n- `props` object with props to pass directly to component \n \n### Example:\n\n```JS\nimport React from 'react';\nimport { render } from 'react-dom';\n\nimport { Subject, merge } from 'rxjs';\nimport { connect, combineProps, useRxController } from 'rx-react-container';\nimport { map, scan, switchMap, startWith } from 'rxjs/operators';\n\nfunction App({ onMinus, onPlus, totalCount, step }) {\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={onMinus}\u003e-{step}\u003c/button\u003e[\u003cspan\u003e{totalCount}\u003c/span\u003e]\n      \u003cbutton onClick={onPlus}\u003e+{step}\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nfunction appController(container) {\n  const onMinus$ = new Subject();\n  const onPlus$ = new Subject();\n\n  const click$ = merge(\n    onMinus$.pipe(map(() =\u003e -1)),\n    onPlus$.pipe(map(() =\u003e +1))\n  );\n  const step$ = container.getProp('step');\n\n  const totalCount$ = step$.pipe(\n    switchMap(step =\u003e click$.pipe(map(v =\u003e v * step))),\n    startWith(0),\n    scan((acc, x) =\u003e acc + x, 0)\n  );\n\n  return combineProps(\n    { totalCount: totalCount$, step: step$ },\n    { onMinus: onMinus$, onPlus: onPlus$ }\n  );\n}\n\nconst AppContainer = connect(appController)(App);\n\n// same thing with hooks\nfunction HookApp(props) {\n  const state = useRxController(appController, props);\n  if(!state) return null;\n  const { onMinus, onPlus, totalCount, step } = state;\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={onMinus}\u003e-{step}\u003c/button\u003e[\u003cspan\u003e{totalCount}\u003c/span\u003e]\n      \u003cbutton onClick={onPlus}\u003e+{step}\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst appElement = document.getElementById('app');\nrender(\u003cAppContainer step=\"1\" /\u003e, appElement);\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzxbodya%2Frx-react-container","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzxbodya%2Frx-react-container","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzxbodya%2Frx-react-container/lists"}