README

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 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	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

$ yarn test

Usage no npm install needed!