react-redux-progress

Progress bar for React applications

Demo

• sample
• nyan-cat-progress

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