@reonomy/reactive-hooks
TypeScript icon, indicating that this package has built-in type declarations

1.3.0 • Public • Published

Reactive Hooks Library For React

GitHub license npm version

$ yarn add @reonomy/reactive-hooks

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

References

  1. The Road to React: Building the Reactive Hooks Library

  2. Hitchhiker’s guide to Reactive Hooks

  3. Dependency Injection in React

  4. 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

Readme

Keywords

Package Sidebar

Install

npm i @reonomy/reactive-hooks

Weekly Downloads

2

Version

1.3.0

License

MIT

Unpacked Size

30.2 kB

Total Files

30

Last publish

Collaborators

  • vdepina
  • igor-p
  • ironprice91
  • oscar.liu
  • herrethan
  • romangorelik92
  • jungers42
  • reotechadmin