@reonomy/reactive-hooks

Reactive Hooks Library For React

$ yarn add @reonomy/reactive-hooks

Reactive Hooks is a library for rendering RxJS Observables using React Hooks.

References

• The Road to React: Building the Reactive Hooks Library

• Hitchhiker’s guide to Reactive Hooks

• Dependency Injection in React

• Ajax in the Fog or HTTP in React

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

Dmitry Doronin

License

MIT