{"id":49056,"library":"react-axios","title":"react-axios","description":"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).","status":"maintenance","version":"2.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/sheaivey/react-axios","tags":["javascript","axios","react","component","xhr","http","ajax","promise","node"],"install":[{"cmd":"npm install react-axios","lang":"bash","label":"npm"},{"cmd":"yarn add react-axios","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-axios","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"HTTP client for making requests","package":"axios","optional":false},{"reason":"React core for component rendering","package":"react","optional":false},{"reason":"Runtime type checking for props","package":"prop-types","optional":false}],"imports":[{"note":"All exports are named; default import does not exist.","wrong":"import Request from 'react-axios'","symbol":"Request","correct":"import { Request } from 'react-axios'"},{"note":"ESM only; CommonJS require works but is less common.","wrong":"const Get = require('react-axios').Get","symbol":"Get","correct":"import { Get } from 'react-axios'"},{"note":"Named export, not default.","wrong":"import AxiosProvider from 'react-axios'","symbol":"AxiosProvider","correct":"import { AxiosProvider } from 'react-axios'"}],"quickstart":{"code":"import React from 'react';\nimport { Get } from 'react-axios';\n\nfunction App() {\n  return (\n    <Get url=\"https://api.example.com/data\">\n      {(error, response, isLoading, makeRequest, axios) => {\n        if (error) return <div>Error: {error.message}</div>;\n        if (isLoading) return <div>Loading...</div>;\n        if (response) return <div>Data: {JSON.stringify(response.data)}</div>;\n        return <div>No request yet</div>;\n      }}\n    </Get>\n  );\n}\n\nexport default App;","lang":"javascript","description":"Shows basic use of Get component with child function callback for loading, error, and success states."},"warnings":[{"fix":"Ensure axios version is ^0.27.2, not v1.x. Use 'npm install axios@0.27.2'","message":"Peer dependency axios ^0.27.2 does not support axios v1.x — install wrong version causes runtime errors","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Use <Get />, <Post />, etc. instead of <Request method='get'>","message":"Component 'Request' is lower-level; prefer named 'Get', 'Post', etc. for clarity","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Always destructure in the correct order: first error, second response, third isLoading, etc.","message":"Child function arguments order is (error, response, isLoading, makeRequest, axios) — often mistaken as (response, error, ...)","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use react-query or SWR if caching or deduplication is needed","message":"No support for react-query-like caching or background refetch; every prop change triggers new request","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Provide a numeric debounce value, e.g., debounce={300}","message":"Debounce prop must be number (ms), not boolean; if set to 'true' it may break requests","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'-18':27 '0.27.2':29 '15.8.1':34 '16':26 '2.0.6':23 '2022':79 'ajax':86 'allow':10 'altern':54 'auto':37 'auto-cancel':36 'axio':3,8,28,44,81 'axiosprovid':47 'background':69 'cach':67 'cadenc':73 'callback':20 'cancel':38 'capabl':71 'child':18 'compon':5,52,83 'current':21 'custom':43 'data':63 'debounc':42 'declar':11 'featur':35 'fetch':64 'function':19 'higher':50 'higher-ord':49 'http':12,85 'insid':14 'instanc':45 'javascript':80 'lack':66 'last':76 'low':75 'major':77 'method':16 'node':88 'order':51 'previous':40 'promis':87 'prop':32 'prop-typ':31 'queri':58 'react':2,4,25,57,82 'react-axio':1 'react-queri':56 'refetch':70 'releas':72 'render':15 'request':13,41 'simpl':62 'support':24 'swr':60 'type':33 'updat':78 'use':17 'version':22 'via':46 'withaxio':53 'wrapper':6 'xhr':84","created_at":"2026-06-07T16:59:49.394266+00:00","updated_at":"2026-06-07T16:59:49.394266+00:00","problems":[{"fix":"npm install react-axios","cause":"Package not installed","error":"Error: Cannot find module 'react-axios'"},{"fix":"Use import { Get } from 'react-axios' instead of import Get from 'react-axios'","cause":"Default import used instead of named import","error":"TypeError: react_axios__WEBPACK_IMPORTED_MODULE_0__.Get is not a function"},{"fix":"Check if response is not null before accessing response.data: if (response) { ... }","cause":"Child function checks response before it is available","error":"Uncaught (in promise) TypeError: Cannot destructure property 'data' of 'response' as it is undefined."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/sheaivey/react-axios","github":"https://github.com/sheaivey/react-axios","docs":null,"changelog":null,"pypi":null,"npm":"react-axios","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}