{"id":20307113,"url":"https://github.com/jadbox/rxhooks","last_synced_at":"2025-04-11T15:06:38.349Z","repository":{"id":57147478,"uuid":"169196530","full_name":"jadbox/rxhooks","owner":"jadbox","description":"React Hook support for Observable Streams","archived":false,"fork":false,"pushed_at":"2019-02-16T00:45:03.000Z","size":791,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T11:11:31.846Z","etag":null,"topics":["observables","react","reactjs","rxjs"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/jadbox.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}},"created_at":"2019-02-05T05:48:20.000Z","updated_at":"2019-08-11T02:10:20.000Z","dependencies_parsed_at":"2022-09-05T16:50:16.456Z","dependency_job_id":null,"html_url":"https://github.com/jadbox/rxhooks","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/jadbox%2Frxhooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadbox%2Frxhooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadbox%2Frxhooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadbox%2Frxhooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jadbox","download_url":"https://codeload.github.com/jadbox/rxhooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248429078,"owners_count":21101782,"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":["observables","react","reactjs","rxjs"],"created_at":"2024-11-14T17:16:18.818Z","updated_at":"2025-04-11T15:06:38.321Z","avatar_url":"https://github.com/jadbox.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Install\n\n`npm install rxhooks`\n\n### API\n\n```typescript\nfunction useRx\u003cT, X\u003e(stream: (c: X) =\u003e Observable\u003cT\u003e, initialValue: X, onErr?: ((error: any) =\u003e void) | undefined, onComplete?: (() =\u003e void) | undefined): [T]\n\nuseRx is a hook that takes an Observable factory function and returns [currentStreamOutput] for use in your component.\nThe stream will rerun anytime the initialValue is changed.\nThe onErr and onComplete parameters are callbacks to handle those stream states\n```\n\n```typescript\nfunction useRxState\u003cT, X\u003e(initialValue: X, pipes: OperatorFunction\u003cany, any\u003e, onErr?: ((error: any) =\u003e void) | undefined, onComplete?: (() =\u003e void) | undefined): [T, (x: X) =\u003e void]\n\nuseRxState allows adding items to an Rx stream that is created for you.\nThe stream will rerun anytime the initialValue is changed.\nThe pipes parameter allows passing in Rx operators to work upon the internal source stream.\nThe onErr and onComplete parameters are callbacks to handle those stream states\n```\n\n### Just Show Me the Code\n\n```javascript\nimport {useRx, useRxState} from 'rxhooks';\nimport { scan } from 'rxjs/operators';\nimport { interval } from 'rxjs';\n\n// Read from an Observable stream\nfunction ExampleUseRx() {\n  const stream = (x) =\u003e interval(1000 * x);\n\n  const [speed, setSpeed] = useState(1);\n  const [count] = useRx( stream, speed );\n  \n  return \u003c\u003e\n    \u003cbutton onClick={() =\u003e setSpeed(speed+1)}\u003eMake slower via initialValue change\u003c/button\u003e\n    \u003cp\u003espeed {speed}{' '}|{' '}count {count}\u003c/p\u003e\n  \u003c/\u003e\n}\n\n// Two-way communication between the component and Observable.\n// The signalCount callback pushes values into the Observable source.\n// Parameter \"scan( (acc, x) =\u003e x+acc, 0)\" creates a rolling sum upon the output stream\nfunction ExampleUseRxState() {\n  const initialVal = 1;\n  const [count, signalCount] = useRxState(initialVal, \n    scan( (acc, x) =\u003e x+acc, 0) \n  );\n\n  const onClick = () =\u003e {\n    signalCount(1);\n  }\n  \n  return \u003c\u003e\n    \u003cbutton onClick={onClick}\u003eAdd 1\u003c/button\u003e\n    \u003cp\u003ecount {count}\u003c/p\u003e\n  \u003c/\u003e\n}\n\nclass App extends Component {\n\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cheader className=\"App-header\"\u003e\n          \u003cExampleUseRx/\u003e\n          \u003cbr/\u003e\n          \u003cExampleUseRxState/\u003e\n        \u003c/header\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjadbox%2Frxhooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjadbox%2Frxhooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjadbox%2Frxhooks/lists"}