api-client-react v2.1.0

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

Render props

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

MIT License.