{"id":26643685,"url":"https://github.com/kosich/react-rxjs-elements","last_synced_at":"2025-04-10T23:51:20.259Z","repository":{"id":41815830,"uuid":"281926558","full_name":"kosich/react-rxjs-elements","owner":"kosich","description":"React component for RxJS content","archived":false,"fork":false,"pushed_at":"2023-02-03T11:15:14.000Z","size":1920,"stargazers_count":51,"open_issues_count":9,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T11:23:49.995Z","etag":null,"topics":["js","observable","react","reactive-programming","reactive-streams","reactjs","rxjs","ts"],"latest_commit_sha":null,"homepage":"","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/kosich.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}},"created_at":"2020-07-23T10:55:31.000Z","updated_at":"2025-03-13T21:48:51.000Z","dependencies_parsed_at":"2023-02-08T04:45:32.080Z","dependency_job_id":null,"html_url":"https://github.com/kosich/react-rxjs-elements","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kosich%2Freact-rxjs-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kosich%2Freact-rxjs-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kosich%2Freact-rxjs-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kosich%2Freact-rxjs-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kosich","download_url":"https://codeload.github.com/kosich/react-rxjs-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248317707,"owners_count":21083528,"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":["js","observable","react","reactive-programming","reactive-streams","reactjs","rxjs","ts"],"created_at":"2025-03-24T20:34:39.884Z","updated_at":"2025-04-10T23:51:20.241Z","avatar_url":"https://github.com/kosich.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\n    \u003cbr/\u003e\n    \u0026lt;$\u0026gt;\n    \u003cbr/\u003e\n    \u003csub\u003e\u003csub\u003ereact elements for RxJS content\u003c/sub\u003e\u003c/sub\u003e\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-rxjs-elements\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-rxjs-elements\" alt=\"NPM\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://bundlephobia.com/result?p=react-rxjs-elements@latest\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-rxjs-elements?label=gzipped\" alt=\"Bundlephobia\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://opensource.org/licenses/MIT\" rel=\"nofollow\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/react-rxjs-elements\" alt=\"MIT license\"\u003e\u003c/a\u003e\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n  \u003c/h1\u003e\n\u003c/div\u003e\n\n\u003c!--\n[![NPM](https://img.shields.io/npm/v/react-rxjs-elements)](https://www.npmjs.com/package/react-rxjs-elements) [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/react-rxjs-elements?label=gzipped)](https://bundlephobia.com/result?p=react-rxjs-elements@0.0.1) [![MIT license](https://img.shields.io/npm/l/react-rxjs-elements)](https://opensource.org/licenses/MIT)\n--\u003e\n\nSimply add an Observable as one of `\u003c$\u003e`'s children:\n\n```tsx\n\u003c$\u003e{ stream$ }\u003c/$\u003e\n```\n\nor use a dynamic element, like $img\n\n```tsx\n\u003c$img src={ stream$ } /\u003e\n```\n\n`react-rxjs-elements` will subscribe to the `stream$` and will display it's updates in place.    \nAnd it will clean up all subscriptions for you on component unmount.\n\nTry it [**online**](https://stackblitz.com/edit/react-rxjs-elements?file=index.tsx)\n\n## 📦 Install\n\n```\nnpm i react-rxjs-elements\n```\n\n## 📖 Examples\n\nA simple timer — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-timer?file=index.tsx)\n\n```tsx\nimport React from 'react';\nimport { timer } from 'rxjs';\nimport { $ } from 'react-rxjs-elements';\n\nfunction App() {\n  return \u003c$\u003e{ timer(0, 1000) } sec\u003c/$\u003e\n}\n```\n\n---\n\nDynamic image sources — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-img?file=index.tsx)\n\n```tsx\nimport React from 'react';\nimport { timer } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { $img } from 'react-rxjs-elements';\n\nfunction App() {\n  const src$ = timer(0, 3000).pipe(\n    map(x =\u003e (x % 2) ? 'a.jpg' : 'b.jpg')\n  );\n\n  return \u003c$img src={ src$ } /\u003e\n}\n```\n\n---\n\nA data fetch (with RxJS [ajax](https://rxjs.dev/api/ajax/ajax)) — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-fetch?file=index.tsx)\n\n```tsx\nimport React, { useMemo } from \"react\";\nimport { map, switchMap } from \"rxjs/operators\";\nimport { ajax } from \"rxjs/ajax\";\nimport { $ } from \"react-rxjs-elements\";\n\n\nfunction App() {\n  const data$ = useMemo(() =\u003e\n    ajax.getJSON(URL)\n  , []);\n\n  return \u003c$\u003e{data$}\u003c/$\u003e;\n}\n```\n\n---\n\nA counter — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-counter?file=index.tsx)\n\n```tsx\nimport React from 'react';\nimport { $div } from 'react-rxjs-elements';\nimport { Subject } from 'rxjs';\nimport { startWith, scan } from 'rxjs/operators';\n\nfunction App() {\n  const subject$ = useMemo(() =\u003e new Subject(), []);\n\n  const output$ = useMemo(() =\u003e\n    subject$.pipe(\n      startWith(0),                   // start with a 0\n      scan((acc, curr) =\u003e acc + curr) // then add +1 or -1\n    )\n  , []);\n\n  return \u003c$div\u003e\n    \u003cbutton onClick={()=\u003esubject$.next(-1)}\u003e\n      -\n    \u003c/button\u003e\n    \n    { output$  /* results would be displayed in place */ }\n  \n    \u003cbutton onClick={()=\u003esubject$.next(+1)}\u003e\n      +\n    \u003c/button\u003e\n  \u003c/$div\u003e\n}\n```\n\n\n## 🙂 Enjoy\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosich%2Freact-rxjs-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkosich%2Freact-rxjs-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosich%2Freact-rxjs-elements/lists"}