api-client-react

Small library to simplify the connection with api in React.

With a simple higher-order component (HOC), you can get:

1. The following props for section: { loading, error, data, complete }
2. The following prop: apiClient, with which you can interact with API.

• Note: Each API call is stored in a section

---

Examples

• Simple example: API from params
• Simple example: API from methods
• Advanced example

Getting Started

Installation

You can install with NPM: api-client-react

npm i --save api-client-react

Create your component and connect

import { connectApiClient } from "api-client-react";

const ExampleconnectApiClientComponent = ({ users }) => {
  if (users.loading) {
    return <p>loading</p>;
  }

  if (users.error) {
    return <p>Error</p>;
  }

  if (users.data) {
    return (
      <ol>
        {users.data.map(b => (
          <li key={b.name}>{b.name}</li>
        ))}
      </ol>
    );
  }
}


const config = {
  apiConfig: { // Same object: https://github.com/axios/axios#axios-api
    method: "get",
    url: "https://jsonplaceholder.typicode.com/users"
  },
  section: "users" // Reference section
};

const componentSections = ["users"];

export const ExampleconnectApiClient = connectApiClient(componentSections, config)(ExampleconnectApiClientComponent);

NOTE: If you want to make the call in a method, it is also possible: View codesandbox. Note: Important to send properties apiConfig and section in config property.

Doc

Functions

| function (render props) | params | description | |--|--|--| | apiClient.fetch( apiConfigObject, "sectionExample" ) | apiConfigObject: Same object: https://github.com/axios/axios#axios-api | Execute axios fetch with the configuration provided And associate the response to your section |

Render props

You will receive a props for each section that is an object composed of:

| prop | types | default value | description | |--|--|--|--| | error | error | false | Api error | | data | result | | Data response | | loading | boolean | false| Only true during call response period. | | complete | boolean | false| Only true when api call is finished. |

---

MIT License.

---