HTTP client component for React


Keywords
axios, axios-react, http, http-client, http-request, http-request-handler, http-requests, javascript, react, react-axios, reactjs, response-schema, typescript, xhr, xhr-wrapper
License
MIT
Install
npm install axios-react@1.0.1

Documentation

Axios React

NPM NPM JavaScript Style Guide

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


Support