{"id":17857150,"url":"https://github.com/caferrari/react-use-observable","last_synced_at":"2025-07-15T13:12:09.509Z","repository":{"id":47335666,"uuid":"191756502","full_name":"caferrari/react-use-observable","owner":"caferrari","description":"Use observables with react hooks","archived":false,"fork":false,"pushed_at":"2023-07-18T23:13:23.000Z","size":152,"stargazers_count":9,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-25T01:48:30.632Z","etag":null,"topics":["observable","react","react-hooks","rxjs"],"latest_commit_sha":null,"homepage":null,"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/caferrari.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,"publiccode":null,"codemeta":null}},"created_at":"2019-06-13T12:13:24.000Z","updated_at":"2023-07-08T07:53:29.000Z","dependencies_parsed_at":"2024-06-19T02:58:20.667Z","dependency_job_id":"fb463851-0c16-4f0d-9246-9d4c9e5c29fd","html_url":"https://github.com/caferrari/react-use-observable","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/caferrari/react-use-observable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caferrari%2Freact-use-observable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caferrari%2Freact-use-observable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caferrari%2Freact-use-observable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caferrari%2Freact-use-observable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caferrari","download_url":"https://codeload.github.com/caferrari/react-use-observable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caferrari%2Freact-use-observable/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265437620,"owners_count":23765124,"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":["observable","react","react-hooks","rxjs"],"created_at":"2024-10-28T03:11:31.609Z","updated_at":"2025-07-15T13:12:09.481Z","avatar_url":"https://github.com/caferrari.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-use-observable\n\nUse observables with react hooks in an very easy way.\n\n## Requirements\n\n* React \u003e= 16.8\n* RxJS \u003e= 6\n\n## Installation\n\n```bash\nyarn add react-use-observable\n```\n\n## Usage\n\n```js\nimport React from 'react';\nimport { useObservable } from 'react-use-observable';\nimport * as rxjs from 'rxjs';\nimport { map, startWith } from 'rxjs/operators';\n\ninterface IProps {\n  start: number;\n}\n\nexport const Counter: React.FC\u003cIProps\u003e = ({ start }) =\u003e {\n  const [ value ] = useObservable(() =\u003e {\n    return rxjs.interval(1000).pipe(\n      map(v =\u003e v + start),\n      startWith(start)\n    );\n  }, [/* deps */])\n\n  return (\n    \u003cp\u003eStarted with undefined, value: {value}\u003c/p\u003e\n  );\n}\n```\n\n## API\n\n|                     Hook                      |                Return                 |                                                                                               Description                                                                                                |\n| --------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| useObservable(Func, DepsArray)                | Value, Error, Completed               | Run the observable function on every deps change, the first value will be undefined                                                                                                                      |\n| useRetryableObservable(Func, DepsArray)       | Value, Error, Completed, RetryFunc    | Same useObservable, but the last value of return is a retry function to rerun the observable function, useful when an error happens or do a refresh                                                      |\n| useMappedObservable(Func, MapFunc, DepsArray) | Value, Error, Completed               | Same useObservable, but with a internal map and a distinctUntilChanged, useful to do less renders                                                                                                        |\n| useCallbackObservable(Func, DepsArray)        | CallbackFunc, Value, Error, Completed | Same useObservable, but the first result is the callbackFunction and run the observable function only when it is called, useful to use in a submit or button's click and keep the unsubscribe on unmount |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaferrari%2Freact-use-observable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaferrari%2Freact-use-observable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaferrari%2Freact-use-observable/lists"}