Axios React

HTTP client component for React with child function callback to create async requests in render based on Axios.

Installation

Yarn:

$ yarn add axios-react

npm:

$ npm i -S axios-react

Live example

Online Playground

Usage

import React from 'react';
import Request from 'axios-react';

const Demo = () => (
  <Request
    config={{
      method: 'get',
      url: 'https://jsonplaceholder.typicode.com/todos/1',
    }}
  >
    {({ loading, response, error, refetch, networkStatus }) => (
      <div>
          {networkStatus && <span>{networkStatus}</span>}
          {loading && <span>Loading...</span>}
          {error && <span>{error.response.data}</span>}
          {response && <h3>{response.data.title}</h3>}
          <button onClick={refetch}>Refetch!</button>
      </div>
    )}
  </Request>
);

Arguments

| Name | Type | Description | | ---- | ---- | ----------- | | loading | boolean | Request loading. | | response | object | The response for a request contains the Axios response schema. | | error | object | The error for a request. | | refetch | function | Refetch method for a request. | | networkStatus | string | Network Connection Status. |

Props

| Name | Type | Default value | Options | Description | | ---- | ---- |------ | ------------- | ----------- | | config | object | None | Axios request config options | Config options for making requests. | | skip | boolean | false | true or false | Disable sending requests when mounting the component. |

Read more

• The easiest way to create HTTP requests in React.js

Support