[](https://www.npmjs.com/package/reactivex-react) [](https://www.npmjs.com
npm install reactivex-react




- lazy - it doesn't enable until you invoke it
- disable automatically from not used values
- disable automatically when component is unmounted
``sh`
npm install reactivex-react # NPM
yarn add reactivex-react # Yarn
- const $ = useObservables({onUpdate: useForceUpdate(), unusedReaderStrategy: 'destroy-reader'}) - creates function to read & subscribe to observables.
`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);
}
}
`
- useObservables` - React hook to observe multiple rxjs streams.