react-rxjs-elements

<$>
_{react elements for RxJS content}

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

📦 Install

npm i react-rxjs-elements

📖 Examples

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>
}

🙂 Enjoy