Progress bar for React and Redux applications

react-redux-progress

Progress bar for React and Redux applications.

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

Checkout examples/real-world for more

Prop Types for ProgressBarProvider

GitHub