{"id":13495417,"url":"https://github.com/crimx/observable-hooks","last_synced_at":"2025-05-15T05:08:23.691Z","repository":{"id":37733243,"uuid":"197299111","full_name":"crimx/observable-hooks","owner":"crimx","description":"⚛️☯️💪 React hooks for RxJS Observables. Concurrent mode safe.","archived":false,"fork":false,"pushed_at":"2025-04-11T14:08:01.000Z","size":8019,"stargazers_count":1037,"open_issues_count":4,"forks_count":45,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-04-11T15:57:07.606Z","etag":null,"topics":["concurrent-mode","react-rxjs","react-rxjs-hooks","react-rxjs-observable","rxjs","rxjs-hooks","rxjs-observables","suspense"],"latest_commit_sha":null,"homepage":"https://observable-hooks.js.org","language":"TypeScript","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/crimx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2019-07-17T02:20:27.000Z","updated_at":"2025-04-03T06:48:03.000Z","dependencies_parsed_at":"2023-01-31T05:46:30.008Z","dependency_job_id":"53047a52-9100-4161-a06e-595d76b24e11","html_url":"https://github.com/crimx/observable-hooks","commit_stats":{"total_commits":398,"total_committers":14,"mean_commits":"28.428571428571427","dds":0.128140703517588,"last_synced_commit":"619261bcbb3356d86e52761e2768ccaa5491bf00"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crimx%2Fobservable-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crimx%2Fobservable-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crimx%2Fobservable-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crimx%2Fobservable-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crimx","download_url":"https://codeload.github.com/crimx/observable-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"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":["concurrent-mode","react-rxjs","react-rxjs-hooks","react-rxjs-observable","rxjs","rxjs-hooks","rxjs-observables","suspense"],"created_at":"2024-07-31T19:01:34.474Z","updated_at":"2025-05-15T05:08:18.682Z","avatar_url":"https://github.com/crimx.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# [observable-hooks](https://github.com/crimx/observable-hooks)\n\n[![Docs](https://img.shields.io/badge/Docs-read-%23fdf9f5)](https://observable-hooks.js.org)\n[![npm-version](https://img.shields.io/npm/v/observable-hooks.svg)](https://www.npmjs.com/package/observable-hooks)\n[![Build Status](https://github.com/crimx/observable-hooks/actions/workflows/build.yml/badge.svg)](https://github.com/crimx/observable-hooks/actions/workflows/build.yml)\n[![Coverage Status](https://img.shields.io/codeclimate/coverage/crimx/observable-hooks)](https://codeclimate.com/github/crimx/observable-hooks)\n\n![logo](https://github.com/crimx/observable-hooks/blob/main/logo.jpg?raw=true)\n\nConcurrent mode compatible React hooks for RxJS Observables. Simple, flexible, testable and performant.\n\n- Seamless integration of React and RxJS.\n  - Concurrent mode compatible.\n  - Props, state and context to Observables.\n  - Observables to states and props events.\n  - Conditional rendering with stream of React Components.\n  - Render-as-You-Fetch with React Suspense.\n  - No `tap` hack needed. With Epic-like signature Observable operation is pure and testable.\n- Full-powered RxJS. Do whatever you want with Observables. No limitation nor compromise.\n- Fully tested. We believe in stability first. This project will always maintain a 100% coverage.\n- Tiny and fast. A lot of efforts had been put into improving integration. This library should have zero visible impact on performance.\n- Compatible with RxJS 6 \u0026 7.\n\n## Installation\n\n```bash\npnpm add observable-hooks\n```\n\n## Why?\n\nReact added hooks for [reusing stateful logic](https://reactjs.org/docs/hooks-intro.html#its-hard-to-reuse-stateful-logic-between-components).\n\nObservable is a powerful way to encapsulate both sync and async logic.\n\n[Testing](https://rxjs-dev.firebaseapp.com/guide/testing/marble-testing) Observables is also way easier than testing other async implementations.\n\nWith [observable-hooks](https://github.com/crimx/observable-hooks) we can create rich reusable Components with ease.\n\n## What It Is Not\n\nThis library is not for replacing state management tools like Redux but to reduce the need of dumping everything into global state.\n\nUsing this library does not mean you have to turn everything observable which is not encouraged. It plays well side by side with other hooks. Use it only on places where it's needed.\n\n## At First Glance\n\n```jsx\nimport * as React from \"react\";\nimport { useObservableState } from \"observable-hooks\";\nimport { timer } from \"rxjs\";\nimport { switchMap, mapTo, startWith } from \"rxjs/operators\";\n\nconst App = () =\u003e {\n  const [isTyping, updateIsTyping] = useObservableState(\n    transformTypingStatus,\n    false\n  );\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput type=\"text\" onKeyDown={updateIsTyping} /\u003e\n      \u003cp\u003e{isTyping ? \"Good you are typing.\" : \"Why stop typing?\"}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\n// Logic is pure and can be tested like Epic in redux-observable\nfunction transformTypingStatus(event$) {\n  return event$.pipe(\n    switchMap(() =\u003e timer(1000).pipe(mapTo(false), startWith(true)))\n  );\n}\n```\n\n## Usage\n\nRead the docs at \u003chttps://observable-hooks.js.org\u003e or [`./docs`](./docs/).\n\nExamples are in [here](https://github.com/crimx/observable-hooks/tree/main/examples). Play on CodeSandbox:\n\n- [Pomodoro Timer Example](https://codesandbox.io/s/github/crimx/observable-hooks/tree/main/examples/pomodoro-timer)\n- [Typeahead Example](https://codesandbox.io/s/github/crimx/observable-hooks/tree/main/examples/typeahead)\n- [Render-as-You-Fetch using Suspense](https://codesandbox.io/s/github/crimx/observable-hooks/tree/main/examples/suspense)\n- [React Context](https://codesandbox.io/s/github/crimx/observable-hooks/tree/main/examples/context)\n\nNote that there are also some useful [utilities](https://observable-hooks.js.org/api/helpers.html) for common use cases to reduce garbage collection.\n\n## Developing\n\nInstall dependencies:\n\n```\npnpm i\n```\n\nRun tests:\n\n```\npnpm test\n```\n\nLint code:\n\n```\npnpm lint\n```\n\n[docs]: https://observable-hooks.js.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrimx%2Fobservable-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrimx%2Fobservable-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrimx%2Fobservable-hooks/lists"}