Registry / devops / react-fetch-progressbar

react-fetch-progressbar

library1.0.0jsnpmunverified

A React component that displays a progress bar automatically when fetch requests are active. Version 1.0.0 is the latest stable release. It wraps window.fetch to track active requests and shows a configurable progress bar only after 150ms delay, with a smooth 100% completion animation. Key differentiators: lightweight, no external dependencies besides React, simple override of global fetch, and customizable via style or CSS.

devops

npm install react-fetch-progressbar

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-FETCH-PROGRE

react-fetch-progressbar

devopsjavascriptv1.0.0

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.

ProgressBar

✓ import { ProgressBar } from 'react-fetch-progressbar'

✗ import ProgressBar from 'react-fetch-progressbar'

ProgressBar is a named export, not default.

progressBarFetch

✓ import { progressBarFetch } from 'react-fetch-progressbar'

✗ const progressBarFetch = require('react-fetch-progressbar').progressBarFetch

Require is possible but ESM with named import is preferred.

setOriginalFetch

✓ import { setOriginalFetch } from 'react-fetch-progressbar'

Must be called before overriding window.fetch with progressBarFetch.

Shows how to initialize progressBarFetch, override window.fetch, and render the ProgressBar component with custom styling.

import React from 'react'; import { render } from 'react-dom'; import { ProgressBar, progressBarFetch, setOriginalFetch } from 'react-fetch-progressbar'; // Set original fetch before overriding setOriginalFetch(window.fetch); window.fetch = progressBarFetch; const App = () => ( <div> <ProgressBar style={{ backgroundColor: 'red', height: '10px' }} /> <button onClick={() => fetch('/api/data')}>Fetch Data</button> </div> ); render(<App />, document.getElementById('root'));

Debug

Known issues

gotchaMust call setOriginalFetch BEFORE overriding window.fetch, otherwise progressBarFetch will not work.

fix

Ensure setOriginalFetch(window.fetch) is called before window.fetch = progressBarFetch.

affects: >=1.0.0

gotchaOnly render one <ProgressBar /> at a time; multiple instances interfere with each other.

fix

Render only a single <ProgressBar /> globally.

affects: >=1.0.0

gotchaDo not override the 'transition' or 'width' CSS properties; they are essential for animation.

fix

Only customize style properties like backgroundColor, height, top, zIndex.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot read property 'fetch' of undefined

window.fetch is not available (e.g., SSR, Node.js, or window is undefined)

fix

Ensure code runs in a browser environment; check for window before overriding.

progressBarFetch is not a function

Import mistake: possibly imported ProgressBar incorrectly or used default import

fix

Use named import: import { progressBarFetch } from 'react-fetch-progressbar'

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

reactrequiredRequired as peer dependency for React component rendering

Agent activity

11 hits · last 30 days

node

Amazon

Resources

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

packagereact-fetch-progressbar ↗

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