Simply add an Observable as one of <$>
's children:
<$>{ stream$ }</$>
or use a dynamic element, like $img
<$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
npm i react-rxjs-elements
A simple timer — online sandbox
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
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) — online sandbox
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
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>
<button onClick={()=>subject$.next(-1)}>
-
</button>
{ output$ /* results would be displayed in place */ }
<button onClick={()=>subject$.next(+1)}>
+
</button>
</$div>
}