{"id":13835183,"url":"https://github.com/typeofweb/react-with-observable","last_synced_at":"2025-09-12T21:33:07.267Z","repository":{"id":32676138,"uuid":"139120008","full_name":"typeofweb/react-with-observable","owner":"typeofweb","description":"Use Observables with React declaratively!","archived":false,"fork":false,"pushed_at":"2023-01-09T19:36:05.000Z","size":4437,"stargazers_count":111,"open_issues_count":49,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-29T12:57:50.497Z","etag":null,"topics":["jsx","observable","react","reactjs","rxjs"],"latest_commit_sha":null,"homepage":"https://mmiszy.github.io/react-with-observable/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/typeofweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-29T08:02:22.000Z","updated_at":"2024-09-18T05:11:49.000Z","dependencies_parsed_at":"2023-01-14T22:00:39.253Z","dependency_job_id":null,"html_url":"https://github.com/typeofweb/react-with-observable","commit_stats":null,"previous_names":["typeofweb/react-with-observable"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typeofweb%2Freact-with-observable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typeofweb%2Freact-with-observable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typeofweb%2Freact-with-observable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typeofweb%2Freact-with-observable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typeofweb","download_url":"https://codeload.github.com/typeofweb/react-with-observable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232792149,"owners_count":18577261,"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":["jsx","observable","react","reactjs","rxjs"],"created_at":"2024-08-04T14:00:57.683Z","updated_at":"2025-01-06T21:46:09.881Z","avatar_url":"https://github.com/typeofweb.png","language":"TypeScript","readme":"# react-with-observable\n[![buddy pipeline](https://app.buddy.works/mmiszy/react-with-observable/pipelines/pipeline/225575/badge.svg?token=dfc09b1458ffdb6655820015738f0e3bc1a515874804b85799fe6af214f3473c \"buddy pipeline\")](https://app.buddy.works/mmiszy/react-with-observable/pipelines/pipeline/225575)\n[![codecov](https://codecov.io/gh/mmiszy/react-with-observable/branch/master/graph/badge.svg)](https://codecov.io/gh/mmiszy/react-with-observable)\n[![cypress dashboard](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/#/projects/dmnv1v/runs)\n[![npm](https://img.shields.io/npm/v/react-with-observable.svg)](https://www.npmjs.com/package/react-with-observable)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-with-observable.svg)](https://www.npmjs.com/package/react-with-observable)\n\n\n\n`react-with-observable`: use Observables declaratively in ⚛️  React!\n\n* ✅ Supports any Observable implementation compatible with ECMAScript Observable (e.g. **RxJS**)!\n* ✅ Inspired by the `AsyncPipe` from Angular!\n* ✅ Very extensible by composing Observable operators!\n* ✅ TypeScript definitions included!\n\nIt handles subscribing and unsubscribing automatically and, hence, you don't have to worry about memory leaks or updating state when new values come!\n\nInspired by the `AsyncPipe` from Angular. Uses React's [`create-subscription`](https://github.com/facebook/react/tree/master/packages/create-subscription) under the hood.\n\n## Install\n```javascript\nnpm install --save react-with-observable create-subscription\n```\n\nGet a polyfill for `Symbol.observable` if you need one (you most likely do).\n\n```javascript\nnpm install --save symbol-observable\n```\n\nRemember to `import 'symbol-observable'` **before** `rxjs` or `react-with-observable`!\n\n## Usage\nThe component supports any Observable library compatible with the [Observables for ECMAScript draft proposal](https://github.com/tc39/proposal-observable).\n\n### Basics\nThis package exports a single named component `Subscribe`. It expects you to provide an Observable as its only child:\n\n```javascript\nconst source$ = Observable.of('Hello, world!');\n// …\n\u003cSubscribe\u003e{source$}\u003c/Subscribe\u003e\n```\n\nThis results in \"Hello, world!\" being displayed.\n\n### Reactivity\nThe component automatically updates whenever a new value is emitted by the Observable:\n\n```javascript\nconst source$ = Observable.interval(1000);\n// …\n\u003cSubscribe\u003e{source$}\u003c/Subscribe\u003e\n```\n\nAs a result, the next integer is displayed every second.\n\n\n### Operators\nYou can transform the Observable as you wish, as long as the final result is also an Observable:\n\n```javascript\nconst source$ = Observable.interval(1000);\n// …\n\u003cSubscribe\u003e\n  {source$.pipe(\n    map(val =\u003e 10 * val),\n    scan((acc, val) =\u003e acc + val, 0),\n    map(val =\u003e \u003cinput value={val} /\u003e)\n  )}\n\u003c/Subscribe\u003e\n```\n\nAs the result, an `\u003cinput\u003e` element is rendered. Its value is changed every second to 0, 10, 30, 60, 100,  and so on.\n\n### Initial value\nUse your Observable library! `react-with-observable` doesn't implement any custom way to provide the default value and it doesn't need to. For example, with RxJS, you can use the `startWith` operator:\n\n```javascript\n\u003cSubscribe\u003e\n  {source$.pipe(\n    startWith(null)\n  )}\n\u003c/Subscribe\u003e\n```\n\n## Example\nYou can find more interactive examples here: https://mmiszy.github.io/react-with-observable/\n\n```javascript\nimport 'symbol-observable';\nimport * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport { map, startWith } from 'rxjs/operators';\nimport { Subscribe } from 'react-with-observable';\n\n// myContacts$ is an Observable of an array of contacts\n\nexport class ContactsList extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch2\u003eMy Contacts\u003c/h2\u003e\n        \u003cSubscribe\u003e\n          {myContacts$.pipe(\n            startWith(null),\n            map(this.renderList)\n          )}\n        \u003c/Subscribe\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  renderList = (contacts) =\u003e {\n    if (!contacts) {\n      return 'Loading…';\n    }\n\n    if (!contacts.length) {\n      return 'You have 0 contacts. Add some!';\n    }\n\n    return (\n      \u003cul\u003e\n        {contacts.map(contact =\u003e (\n          \u003cli key={contact.id}\u003e\n            \u003cLink to={`/courses/${contact.id}`}\u003e\n              {contact.fullName} — {contact.description}\n            \u003c/Link\u003e\n          \u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    );\n  };\n}\n```\n\n## Bugs? Feature requests?\nFeel free to create a new issue: [issues](https://github.com/mmiszy/react-with-observable/issues). Pull requests are also welcome!\n","funding_links":[],"categories":["目录"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypeofweb%2Freact-with-observable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftypeofweb%2Freact-with-observable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypeofweb%2Freact-with-observable/lists"}