react-axios

library2.0.6jsnpmunverified

React component wrapper for Axios that allows declarative HTTP requests inside render methods using child function callbacks. Current version 2.0.6 supports React 16-18, Axios ^0.27.2, and prop-types ^15.8.1. Features auto-cancel of previous requests, debounce, custom axios instances via AxiosProvider, and higher-order component withAxios. Alternative to react-query or SWR for simple data fetching, but lacks caching and background refetch capabilities. Release cadence is low (last major update 2022).

testing

npm install react-axios

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-AXIOS

react-axios

testingjavascriptv2.0.6

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Request

✓ import { Request } from 'react-axios'

✗ import Request from 'react-axios'

All exports are named; default import does not exist.

Get

✓ import { Get } from 'react-axios'

✗ const Get = require('react-axios').Get

ESM only; CommonJS require works but is less common.

AxiosProvider

✓ import { AxiosProvider } from 'react-axios'

✗ import AxiosProvider from 'react-axios'

Named export, not default.

Shows basic use of Get component with child function callback for loading, error, and success states.

import React from 'react'; import { Get } from 'react-axios'; function App() { return ( <Get url="https://api.example.com/data"> {(error, response, isLoading, makeRequest, axios) => { if (error) return <div>Error: {error.message}</div>; if (isLoading) return <div>Loading...</div>; if (response) return <div>Data: {JSON.stringify(response.data)}</div>; return <div>No request yet</div>; }} </Get> ); } export default App;

Debug

Known issues

breakingPeer dependency axios ^0.27.2 does not support axios v1.x — install wrong version causes runtime errors

fix

Ensure axios version is ^0.27.2, not v1.x. Use 'npm install axios@0.27.2'

affects: >=2.0.0 <3.0.0

deprecatedComponent 'Request' is lower-level; prefer named 'Get', 'Post', etc. for clarity

fix

Use <Get />, <Post />, etc. instead of <Request method='get'>

affects: >=1.0.0

gotchaChild function arguments order is (error, response, isLoading, makeRequest, axios) — often mistaken as (response, error, ...)

fix

Always destructure in the correct order: first error, second response, third isLoading, etc.

affects: >=1.0.0

breakingNo support for react-query-like caching or background refetch; every prop change triggers new request

fix

Use react-query or SWR if caching or deduplication is needed

affects: >=1.0.0

gotchaDebounce prop must be number (ms), not boolean; if set to 'true' it may break requests

fix

Provide a numeric debounce value, e.g., debounce={300}

affects: >=2.0.0

Errors

Common errors & fixes

Error: Cannot find module 'react-axios'

Package not installed

fix

npm install react-axios

TypeError: react_axios__WEBPACK_IMPORTED_MODULE_0__.Get is not a function

Default import used instead of named import

fix

Use import { Get } from 'react-axios' instead of import Get from 'react-axios'

Uncaught (in promise) TypeError: Cannot destructure property 'data' of 'response' as it is undefined.

Child function checks response before it is available

fix

Check if response is not null before accessing response.data: if (response) { ... }

Upgrade

Version history

2.0.6latest on npm

Audit

Dependencies

axiosrequiredHTTP client for making requests

reactrequiredReact core for component rendering

prop-typesrequiredRuntime type checking for props

Agent activity

11 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/sheaivey/react-axios ↗

packagereact-axios ↗

homepagehttps://github.com/sheaivey/react-axios ↗