rx-if.ts

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

/**
 * Компонент-аналог *ngIf - принимает на вход поток Observable<boolean>. Если в поток приходит true - рисует содержимое
 */
export function RxIf(props: { conditionStream: Observable<boolean>, children: JSX.Element }): JSX.Element {
  // @ts-ignore
  const [state, setState] = useState({ active: false });
  useEffect(() => {
    const subscription = props.conditionStream.pipe(
      distinctUntilChanged()
    ).subscribe(
      (value: boolean) => setState({ active: value })
    );
    return () => {
      subscription.unsubscribe();
    };
  }, []);

  // @ts-ignore
  return state.active ? props.children : null;
}