2.2.4 • Published 2 years ago
react-redux-progress v2.2.4
react-redux-progress
Progress bar for React applications
Demo
Installation
Using npm:
$ npm install --save react-redux-progress
Using yarn:
$ yarn add react-redux-progress
Using pnpm:
$ pnpm install react-redux-progress
// using ES6 modules
import { useProgress } from 'react-redux-progress';
// using CommonJS modules
var { useProgress } = require('react-redux-progress');
The UMD build is also available on unpkg:
<script src="https://unpkg.com/react-redux-progress/umd/react-redux-progress.min.js"></script>
You can find the library on window.ReactReduxProgress
.
Usage
Custom Progress
import { useProgress } from 'react-redux-progress';
// give percent any shape you want
const MyProgress = ({ isActive }) => {
const percent = useProgress(isActive);
return <div>{`${percent}%`}</div>;
};
Simple usage
import { ProgressBarProvider } from 'react-redux-progress/ProgressBarProvider';
// default color is #77b6ff
const Layout = ({ isProgressActive, children }) => (
<div>
<ProgressBarProvider isActive={isProgressActive} color="#db7093" />
{children}
</div>
);
You can store isProgressActive variable in redux store and control it with your actions
import { combineReducers } from 'redux';
import { progress } from 'react-redux-progress/reducer'
const rootReducers = combineReducers({
progress,
// other reducers
});
export default rootReducers;
Get progress status
import { useSelector } from 'react-redux';
import { ProgressBarProvider } from 'react-redux-progress/ProgressBarProvider';
const Layout = ({ isProgressActive, children }) => {
const isProgressActive = useSelector(state => state.progress.isActive);
return (
<div>
<ProgressBarProvider isActive={isProgressActive} />
{children}
</div>
);
};
Async action
const startAction = (progressId) => ({
type: 'START_ASYNC_ACTION', // your action name
progressId,
});
const stopAction = (progressId) => ({
type: 'STOP_ASYNC_ACTION', // your action name
progressId,
});
// dispatch thunk action
export function startAsyncAction() {
return dispatch => {
const progressId = 'unique-string';
dispatch(startAction(progressId));
setTimeout(() => {
dispatch(stopAction(progressId));
}, 3000);
};
}
Prop Types for useProgress(isActive: boolean, options?: Config = {}) hook
Property | Type | Required? | Default | Description |
---|---|---|---|---|
maxPercent | Integer | 85 | Progress stop point | |
intervalTime | Integer | 450 | Update interval milliseconds | |
increment | Function | Default incrementor (based on random) |
Checkout examples/real-world for more
Prop Types for ProgressBarProvider
Property | Type | Required? | Default | Description |
---|---|---|---|---|
isActive | Boolean | ✓ | Progress activation flag | |
color | String | #77b6ff | Custom color for progress bar percent | |
className | String | Optional custom CSS class name to attach to root Percent element. | ||
styles | Object | Optional custom CSS styles to attach to root Percent element. | ||
absolute | Boolean | false | Position property for Percent |
Contributions
Use GitHub issues for requests.
I actively welcome pull requests; learn how to contribute.
Tests
$ pnpm test
2.2.4
2 years ago
2.2.3
2 years ago
2.2.2
2 years ago
2.2.1
3 years ago
2.2.0
3 years ago
2.1.3-beta.1
3 years ago
2.1.3-beta.2
3 years ago
2.1.1
5 years ago
2.1.0
5 years ago
2.0.0
5 years ago
2.0.0-beta.1
5 years ago
2.0.0-beta.0
5 years ago
1.1.0
5 years ago
1.0.1
6 years ago
1.0.0-rc.0
6 years ago
1.0.0
6 years ago
0.4.3
6 years ago
0.4.2
6 years ago
0.4.0
6 years ago
0.3.0
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.0
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago