Axios React

August 27, 2021 ยท View on GitHub

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

NameTypeDescription
loadingbooleanRequest loading.
responseobjectThe response for a request contains the Axios response schema.
errorobjectThe error for a request.
refetchfunctionRefetch method for a request.
networkStatusstringNetwork Connection Status.

Props

NameTypeDefault valueOptionsDescription
configobjectNoneAxios request config optionsConfig options for making requests.
skipbooleanfalsetrue or falseDisable sending requests when mounting the component.

Read more


Support