rx-bind.ts

import React, { useEffect, useState } from 'react';
import { Observable } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

export type RxBindProps<T> = {
  stream: Observable<T>;
  children(dataFromStream: T | void): JSX.Element | Array<JSX.Element> | null;
};

export function RxBind<T>(props: RxBindProps<T>): JSX.Element {
  const [streamValue, setStreamValue] = useState<T | void>(void 0);

  useEffect(() => {
    const subscription = props.stream.pipe(
      distinctUntilChanged()
    ).subscribe(setStreamValue);
    return () => {
      subscription.unsubscribe();
    };
  }, []);

  // @ts-ignore
  return props.children(streamValue);
}