{"id":18397699,"url":"https://github.com/nozbe/withobservables","last_synced_at":"2025-04-09T13:10:33.311Z","repository":{"id":33151537,"uuid":"147198389","full_name":"Nozbe/withObservables","owner":"Nozbe","description":"HOC (Higher-Order Component) for connecting RxJS Observables to React Components","archived":false,"fork":false,"pushed_at":"2023-10-15T18:14:05.000Z","size":1303,"stargazers_count":68,"open_issues_count":12,"forks_count":26,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-02T12:12:42.174Z","etag":null,"topics":["hoc","observable","react","rxjs"],"latest_commit_sha":null,"homepage":"https://github.com/Nozbe/WatermelonDB","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/Nozbe.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}},"created_at":"2018-09-03T11:56:58.000Z","updated_at":"2024-08-29T02:44:07.000Z","dependencies_parsed_at":"2023-10-16T10:01:52.001Z","dependency_job_id":"c3b68fd5-8cbb-4a05-9ed2-567d0e3b2f71","html_url":"https://github.com/Nozbe/withObservables","commit_stats":{"total_commits":251,"total_committers":14,"mean_commits":"17.928571428571427","dds":0.5776892430278884,"last_synced_commit":"4d360044b34bdd98ef8ef8c68c54aa7a61fbeffc"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nozbe%2FwithObservables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nozbe%2FwithObservables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nozbe%2FwithObservables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nozbe%2FwithObservables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nozbe","download_url":"https://codeload.github.com/Nozbe/withObservables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045245,"owners_count":21038554,"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","observable","react","rxjs"],"created_at":"2024-11-06T02:18:14.649Z","updated_at":"2025-04-09T13:10:33.287Z","avatar_url":"https://github.com/Nozbe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `withObservables`\n\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"MIT License\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://travis-ci.com/Nozbe/withObservables\"\u003e\n    \u003cimg src=\"https://api.travis-ci.com/Nozbe/withObservables.svg?branch=master\" alt=\"CI Status\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@nozbe/with-observables\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@nozbe/with-observables.svg\" alt=\"npm\"\u003e\n  \u003c/a\u003e\n\nA [higher-order component](https://reactjs.org/docs/higher-order-components.html) for connecting RxJS [Observables](https://github.com/ReactiveX/rxjs) to React components.\n\n## ⚠️ Deprecation notice ⚠️\n\n**`@nozbe/with-observables` as a standalone package is deprecated as of August 2023.**\n\nIt continues to live on as part of [WatermelonDB](https://github.com/Nozbe/WatermelonDB). If you use WatermelonDB 0.27 or later, use this import instead:\n\n```js\n`import { withObservables } from '@nozbe/watermelondb/react'`\n```\n\n## Example\n\n(Taken from [WatermelonDB](https://github.com/Nozbe/WatermelonDB/))\n\n```js\nconst Post = ({ post, comments }) =\u003e (\n  \u003carticle\u003e\n    \u003ch1\u003e{post.name}\u003c/h1\u003e\n    \u003cp\u003e{post.body}\u003c/p\u003e\n    \u003ch2\u003eComments\u003c/h2\u003e\n    {comments.map(comment =\u003e\n      \u003cEnhancedComment key={comment.id} comment={comment} /\u003e\n    )}\n  \u003c/article\u003e\n)\n\nconst enhance = withObservables(['post'], ({ post }) =\u003e ({\n  post: post.observe(),\n  comments: post.comments.observe()\n}))\n\nconst EnhancedPost = enhance(Post)\n```\n\n\n**➡️ Learn more:** [Connecting WatermelonDB to Components](https://watermelondb.dev/docs/Components)\n\n## Installation\n\n```bash\nyarn add @nozbe/with-observables\n```\n\nAnd then to use:\n\n```js\nimport withObservables from '@nozbe/with-observables'\n```\n\n## Usage\n\n```js\nwithObservables(triggerProps, getObservables)\n\n// Injects new props to a component with values from the passed Observables\n//\n// Every time one of the `triggerProps` changes, `getObservables()` is called\n// and the returned Observables are subscribed to.\n//\n// Every time one of the Observables emits a new value, the matching inner prop is updated.\n//\n// You can return multiple Observables in the function. You can also return arbitrary objects that have\n// an `observe()` function that returns an Observable.\n//\n// The inner component will not render until all supplied Observables return their first values.\n// If `triggerProps` change, renders will also be paused until the new Observables emit first values.\n//\n// If you only want to subscribe to Observables once (the Observables don't depend on outer props),\n// pass `null` to `triggerProps`.\n//\n// Errors are re-thrown in render(). Use React Error Boundary to catch them.\n//\n// Example use:\n//   withObservables(['task'], ({ task }) =\u003e ({\n//     task: task,\n//     comments: task.comments.observe()\n//   }))\n```\n\n## Typescript\n\nThe TypeScript bindings expose a helper type, `ObservableifyProps\u003cProps, ObservableKeys, ObservableConvertibleKeys\u003e` which can make it easier to wrap components without duplicating interfaces:\n```ts\ninterface Props {\n  post: Post;\n  author: Author;\n  someOtherProp: boolean;\n  anotherProp: number;\n}\n\nconst PostRenderer: React.FC\u003cProps\u003e = (props) =\u003e ( ... );\n\ntype InputProps = ObservableifyProps\u003cProps, \"author\", \"post\"\u003e\nconst enhance = withObservables([\"post\", \"author\"], ({ post }: InputProps) =\u003e ({\n  post,\n  author: author.observe()\n});\n\nexport default enhance(PostRenderer);\n```\n\nOr you can let `getObservables` define your props for you:\n```tsx\nimport withObservables, {ExtractedObservables} from \"@nozbe/with-observables\"\n\nconst getObservables = ({ post }: { post: Post }}) =\u003e ({\n  post,\n  author: author.observe()\n});\n\ninterface Props extends ExtractedObservables\u003cReturnType\u003ctypeof getObservables\u003e\u003e {\n  someOtherProp: boolean;\n  anotherProp: number;\n}\n\nconst PostRenderer: React.FC\u003cProps\u003e = (props) =\u003e (\n  \u003c\u003e{props.author.id}\u003c/\u003e\n);\n\nexport default withObservables([\"post\"], getObservables)(PostRenderer);\n```\n\n## Author and license\n\n**withObservables** was created by [@Nozbe](https://github.com/Nozbe) for [WatermelonDB](https://github.com/Nozbe/WatermelonDB).\n\n**withObservables**' main author and maintainer is [Radek Pietruszewski](https://github.com/radex) ([website](https://radex.io) ⋅ [twitter](https://twitter.com/radexp) ⋅ [engineering posters](https://beamvalley.com))\n\n[See all contributors](https://github.com/Nozbe/withObservables/graphs/contributors).\n\nwithObservables is available under the MIT license. See the [LICENSE](./LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnozbe%2Fwithobservables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnozbe%2Fwithobservables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnozbe%2Fwithobservables/lists"}