react-axios-progressbar
Version:
Show a ProgressBar in React whenever an axios request is in progress.
15 lines (14 loc) • 845 B
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressBar = ProgressBar;
const jsx_runtime_1 = require("react/jsx-runtime");
const useProgressBarMode_1 = require("./useProgressBarMode");
function ProgressBar({ style, axiosInstance }) {
const { mode } = (0, useProgressBarMode_1.useProgressBarMode)(axiosInstance);
if (mode === 'hibernate') {
return null;
}
const width = mode === 'complete' ? 100 : mode === 'init' ? 0 : 80;
const animationSpeed = mode === 'complete' ? 0.8 : 30;
return ((0, jsx_runtime_1.jsx)("div", { className: "react-axios-progress-bar", style: Object.assign(Object.assign({ position: 'absolute', top: '0', zIndex: 9000, backgroundColor: '#f0ad4e', height: '4px' }, style), { width: `${width}%`, transition: `width ${animationSpeed}s ease-in` }) }));
}