r3shaper-react v0.1.1

R3shaper for React

Installation

Install the package using npm

npm install r3shaper r3shaper-react

or if you're using yarn

yarn add r3shaper r3shaper-react

Pre-configurations

In order to use r3shaper-react components, we'll need to have configured an instance of r3shaper client, so let's assume we have following resource:

import apiClient from './';

export const UsersResource = {
  list: apiClient.get('/users'),
  delete: apiClient.delete('/users/{id}')
};

Hook

R3shaper hook accepts 2 arguments and returns an object with 4 properties, as shown in the code snippet below:

import { useR3shaper } from 'r3shaper-react';
/* ... */
const { response, error, loading, dispatch } = useR3shaper(resource, options);

Component

import { R3shaper } from 'r3shaper-react';
import { UserResource } from './api';

function ExampleComponent() {
  return (
    <R3shaper
      debounce={100}
      throttle={500}
      resource={UserResource.list}
    >
      {({ loading, response, dispatch, error }) => (
          <div>
            {loading && <SomeLoadingIndicator/>}
            {response && <SomeResponseWrapper data={response.data}/>}
            {error && <SomeErrorWrapper error={error}>}
            <button onClick={() => dispatch({queryParams: {page: 2}})}>Fetch</button>
          </div>
      )}
    </R3shaper>
  );
}

R3shaper component Props

All other props passed to R3shaper will be passed down to it's children

Higher-Order Component

import { withR3shaper } from 'r3shaper-react';
/* ... */
export default withR3shaper(OriginalComponent, resource, options);

withR3shaper arguments

withR3shaper will pass down to OriginalComponent 4 new props: loading, response, error and dispatch (see hook documentation)

Created with ❤️ by Sergiu Masurceac