Reactive Hooks Library For React
$ yarn add @reonomy/reactive-hooksReactive Hooks is a library for rendering RxJS Observables using React Hooks.
References
API
useRxState
Returns a current value and a function to update it.
[foo, setFoo] = useRxState(foo$);Example:
import React from 'react';
import { useRxState } from '@reonomy/reactive-hooks';
import { Observable } from 'rxjs';
interface IFoo {
foo$: Observable<string>;
}
function Foo({ foo$ }: IFoo) {
const [foo, setFoo] = useRxState(foo$);
return (
<button onClick={() => setFoo('bar')}>
{foo}
</button>
);
}During the initial render, the returned state foo is the same as the current value passed as the first argument foo$.
The button click handler will update foo$ and set this state to bar.
useRxStateResult
Returns a current state of a given observable.
foo = useRxStateResult(foo$);Example:
import React from 'react';
import { useRxState } from '@reonomy/reactive-hooks';
import { Observable } from 'rxjs';
interface IFoo {
foo$: Observable<string>;
}
function FooReader({ foo$ }: IFoo) {
const foo = useRxStateResult(foo$);
return (
<p>
{foo}
</p>
);
}useRxEffect
Invokes a callback function when a given observable emits a new state.
useRxEffect(foo$, didUpdate);Example:
import React from 'react';
import { useRxState } from '@reonomy/reactive-hooks';
import { Observable } from 'rxjs';
interface IFoo {
foo$: Observable<string>;
}
function FooReader({ foo$ }: IFoo) {
useRxEffect(foo$, (foo) => {
console.log('new foo is ', foo);
});
return <p>Foo<p>;
}useRxAjax = useRxState + useRxEffect
Returns an ajax response and a function to submit a request. In addition it invokes a callback function on state updates (e.g. when status is changed from pending to succeeded/failed).
[response, submitRequest] = useRxAjax(ajaxFoo, didUpdate);The callback function is useful when a side effect should be invoked.
useRxDebounce
Invokes a callback function with a given debounce timeout when a given observable emites a new state.
[response, submitRequest] = useRxDebounce(useRxDebounce, didUpdate, timeout);useMountEffect
Invokes a callback function when a component is mounted and rendered for the very first time.
useMountEffect(didMount);Author
License
MIT