https://github.com/kosich/react-rxjs-elements
React component for RxJS content
https://github.com/kosich/react-rxjs-elements
js observable react reactive-programming reactive-streams reactjs rxjs ts
Last synced: 9 months ago
JSON representation
React component for RxJS content
- Host: GitHub
- URL: https://github.com/kosich/react-rxjs-elements
- Owner: kosich
- License: mit
- Created: 2020-07-23T10:55:31.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T11:15:14.000Z (almost 3 years ago)
- Last Synced: 2025-03-26T11:23:49.995Z (9 months ago)
- Topics: js, observable, react, reactive-programming, reactive-streams, reactjs, rxjs, ts
- Language: TypeScript
- Homepage:
- Size: 1.83 MB
- Stars: 51
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
<$>
react elements for RxJS content
Simply add an Observable as one of `<$>`'s children:
```tsx
<$>{ stream$ }$>
```
or use a dynamic element, like $img
```tsx
<$img src={ stream$ } />
```
`react-rxjs-elements` will subscribe to the `stream$` and will display it's updates in place.
And it will clean up all subscriptions for you on component unmount.
Try it [**online**](https://stackblitz.com/edit/react-rxjs-elements?file=index.tsx)
## 📦 Install
```
npm i react-rxjs-elements
```
## 📖 Examples
A simple timer — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-timer?file=index.tsx)
```tsx
import React from 'react';
import { timer } from 'rxjs';
import { $ } from 'react-rxjs-elements';
function App() {
return <$>{ timer(0, 1000) } sec$>
}
```
---
Dynamic image sources — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-img?file=index.tsx)
```tsx
import React from 'react';
import { timer } from 'rxjs';
import { map } from 'rxjs/operators';
import { $img } from 'react-rxjs-elements';
function App() {
const src$ = timer(0, 3000).pipe(
map(x => (x % 2) ? 'a.jpg' : 'b.jpg')
);
return <$img src={ src$ } />
}
```
---
A data fetch (with RxJS [ajax](https://rxjs.dev/api/ajax/ajax)) — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-fetch?file=index.tsx)
```tsx
import React, { useMemo } from "react";
import { map, switchMap } from "rxjs/operators";
import { ajax } from "rxjs/ajax";
import { $ } from "react-rxjs-elements";
function App() {
const data$ = useMemo(() =>
ajax.getJSON(URL)
, []);
return <$>{data$}$>;
}
```
---
A counter — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-counter?file=index.tsx)
```tsx
import React from 'react';
import { $div } from 'react-rxjs-elements';
import { Subject } from 'rxjs';
import { startWith, scan } from 'rxjs/operators';
function App() {
const subject$ = useMemo(() => new Subject(), []);
const output$ = useMemo(() =>
subject$.pipe(
startWith(0), // start with a 0
scan((acc, curr) => acc + curr) // then add +1 or -1
)
, []);
return <$div>
subject$.next(-1)}>
-
{ output$ /* results would be displayed in place */ }
subject$.next(+1)}>
+
$div>
}
```
## 🙂 Enjoy