useStream React Hook

use-stream.js

import { useEffect, useState } from "react";

export function useStream($) {
  const [value, setValue] = useState([]);
  useEffect(() => {
    const subs = $.subscribe({
      next: v => setValue(v),
      complete: () => console.log("stream completed in useStream"),
      error: e => { console.error(e)}
    });
    return () => subs.unsubscribe();
  }, [$]);

  return value;
}

y_my-comp.js

// my-comp.js

import React from "react";
import { useStream } from "./use-stream.js";

export function MyComp({ $ /* an RxJS Stream (or Observable) */, title }) {
  const value = useStream($);

  return (
    <div>
      <p>{title}</p>
      <pre>{value}</pre>
    </div>
  );
}

z_example.js

// example.js

import React from "react";
import ReactDOM from "react-dom";

import { fromEvent } from 'rxjs';
import { scan } from 'rxjs/operators';

import { MyComp } from "./my-comp.js";

const myStream = fromEvent(document, 'click').pipe(scan(count => count + 1, 0))

function App() {
  return (
    <div>
      <p>This is an example app using useStream hook</p>
      <MyComp title="mouse click monitor" $={myStream} />
    </div>
  );
}

function mount() {
  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement);
}

mount();