reactivex-react

React hooks to observe values from RxJs Observable.

Advantages

- lazy - it doesn't enable until you invoke it
- disable automatically from not used values
- disable automatically when component is unmounted

How to install

``sh
npm install reactivex-react # NPM
yarn add reactivex-react # Yarn
`

Usage

- const $ = useObservables({onUpdate: useForceUpdate(), unusedReaderStrategy: 'destroy-reader'}) - creates function to read & subscribe to observables.

See example

`tsx
import { IAppViewModel } from './IAppViewModel';
import React, { FC, useMemo } from 'react';
import { Each, If, Subscription, useObservables } from '../src';
import { interval, of } from 'rxjs';
import { useForceUpdate } from '../src/react/core';

export const AppView: FC<{ model: IAppViewModel }> = ({ model }) => {
const $ = useObservables({ onUpdate: useForceUpdate(), unusedReaderStrategy: 'destroy-reader' });
const observable = useMemo(() => of([5, 6, 7]), []);
const number$ = useMemo(() => interval(1000), []);
// tslint:disable-next-line:no-console
console.log('render');
return (


);
};

export class AppViewModel implements IAppViewModel {
public time$: Observable;
public firstName$ = new BehaviorSubject('');
public lastName$ = new BehaviorSubject('');
public canShowTime$ = new BehaviorSubject(false);

constructor() {
this.time$ = timer(2000, 1000).pipe(
map(() => Date.now()),
);
}

public toggle(): void {
this.canShowTime$.next(!this.canShowTime$.getValue());
}

public changeFirstName(value: string): void {
this.firstName$.next(value);
}

public changeLastName(value: string): void {
this.lastName$.next(value);
}
}

`

API

- useObservables` - React hook to observe multiple rxjs streams.