Registry / ui / react-axios-progressbar

react-axios-progressbar

library1.2.1jsnpmunverified

A lightweight React component that automatically shows a progress bar when Axios requests are in progress. Current stable version: 1.2.1. Low maintenance cadence (last release 2022). Works with Axios ^0.27.2 or ^1.0.0 and React 17/18/19. Ships TypeScript types. Differentiator: minimal setup – wrap your app and get a global progress bar without manual triggers.

npm install react-axios-progressbar

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-AXIOS-PROGRE

react-axios-progressbar

uijavascriptv1.2.1

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.

AxiosProgressBar

✓ import { AxiosProgressBar } from 'react-axios-progressbar'

✗ import AxiosProgressBar from 'react-axios-progressbar'

Package exports a named export, not default.

withProgressBar

✓ import { withProgressBar } from 'react-axios-progressbar'

✗ import { withProgressbar } from 'react-axios-progressbar'

HOC to wrap components that trigger Axios requests. Note lowercase 'b' in 'Bar'.

axios

✓ import axios from 'axios'

✗ import { axios } from 'axios'

Axios itself is a peer dependency, imported separately.

Minimal setup: wrap app with AxiosProgressBar, progress bar appears during any Axios request.

import React from 'react'; import { AxiosProgressBar } from 'react-axios-progressbar'; import axios from 'axios'; function App() { const [data, setData] = React.useState(null); React.useEffect(() => { axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res => setData(res.data)); }, []); return ( <div> <AxiosProgressBar /> <pre>{JSON.stringify(data, null, 2)}</pre> </div> ); } export default App;

Debug

Known issues

gotchaThe component must be a descendant of the Axios instance context. If using multiple Axios instances, you need to configure the bar manually.

fix

Use 'instance' prop to specify custom Axios instance.

affects: >=1.0.0

deprecatedThe 'withProgressBar' HOC is deprecated in favor of the 'AxiosProgressBar' component.

fix

Replace HOC usage with the component wrapper.

affects: >=1.2.0

gotchaIf the bar does not appear, ensure you have not disabled Axios interceptors globally.

fix

Check that no code calls 'axios.interceptors.request.eject(...)'.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'useState')

React not found in scope due to missing import or outdated React version.

fix

Ensure React version >=17 and import React at top of file.

Module not found: Can't resolve 'react-axios-progressbar'

Package not installed or import path typo.

fix

Run 'npm install react-axios-progressbar' and check import casing.

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

axiosrequiredNeeds Axios instance to intercept requests

reactrequiredRequires React >=17 to render component

Agent activity

32 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/42BV/react-axios-progressbar ↗

packagereact-axios-progressbar ↗

homepagehttps://github.com/42BV/react-axios-progressbar#readme ↗