progress

Progress bar for React and Redux applications

Apr 19, 2019
Progress bar for React and Redux applications

react-redux-progress

Progress bar for React and Redux applications.

View demo nyan-cat-progress

Installation

Using npm:

$ npm install --save react-redux-progress

Using yarn:

$ yarn add react-redux-progress
// using ES6 modules import Progress, { ProgressBarProvider, reducer } from 'react-redux-progress'; // using CommonJS modules var Progress, { ProgressBarProvider, reducer } = 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>; };

RenderProps

import Progress from 'react-redux-progress/renderprops'; const MyProgress = ({ isActive }) => ( <Progress isActive={isActive}> {percent => <div>{`${percent}%`}</div>} </Progress> );

Simple usage with prepared component

import { ProgressBarProvider } from 'react-redux-progress'; // 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 { ProgressBarProvider } from 'react-redux-progress'; import { connect } from 'react-redux'; const Layout = ({ isProgressActive, children }) => ( <div> <ProgressBarProvider isActive={isProgressActive} /> {children} </div> ); export default connect( state => ({ isProgressActive: state.progress.isActive }) )(Layout);

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? = {}) hook

PropertyTypeRequired?DefaultDescription
maxPercentInteger85Progress stop point
intervalTimeInteger450Update interval milliseconds
incrementFunctionDefault incrementor (based on random)

Checkout examples/real-world for more

Prop Types for ProgressBarProvider

PropertyTypeRequired?DefaultDescription
isActiveBooleanProgress activation flag
colorString#77b6ffCustom color for progress bar percent
classNameStringOptional custom CSS class name to attach to root Percent element.
stylesObjectOptional custom CSS styles to attach to root Percent element.
absoluteBooleanfalsePosition property for Percent

GitHub

Recommended