# react-redux-progress

> Progress bar for React and Redux applications

Latest version **2.2.4** (published 2022-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-redux-progress
pnpm add react-redux-progress
yarn add react-redux-progress
bun add react-redux-progress
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.4 |
| Published | 2022-08-01 |
| First published | 2017-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Nikoloz Buligini |
| Maintainers | buligini |
| Keywords | react, redux, progress, progress-bar, loading, loading-bar, react-hooks |

## Links

- npm: https://www.npmjs.com/package/react-redux-progress
- Repository: https://github.com/NikaBuligini/react-redux-progress
- Homepage: https://github.com/NikaBuligini/react-redux-progress#readme
- Issues: https://github.com/NikaBuligini/react-redux-progress/issues
- npm.io page: https://npm.io/package/react-redux-progress

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.4 (latest) — 2022-08-01
- 2.1.3-beta.2 (beta) — 2021-03-24
- 2.2.3 — 2022-04-18
- 2.2.2 — 2022-04-18
- 2.2.1 — 2021-04-02
- 2.2.0 — 2021-04-02
- 2.1.3-beta.1 — 2021-03-24
- 2.1.1 — 2019-10-18
- 2.1.0 — 2019-06-04
- 2.0.0 — 2019-04-18
- 2.0.0-beta.1 — 2019-04-18
- 2.0.0-beta.0 — 2019-04-18
- 1.1.0 — 2019-02-05
- 1.0.1 — 2018-05-07
- 1.0.0-rc.0 — 2018-04-03
- … 10 more at https://npm.io/package/react-redux-progress/versions

## README

# react-redux-progress
Progress bar for React applications

![](https://media.giphy.com/media/26u48f9ry3CH9D9Vm/giphy.gif)

## Demo

- [sample](http://react-redux-progress.surge.sh/)
- [nyan-cat-progress](http://nyan-cat-progress-demo.surge.sh/)

## Installation

Using [npm](https://www.npmjs.com/):

```shell
$ npm install --save react-redux-progress
```

Using [yarn](https://yarnpkg.com/):

```shell
$ yarn add react-redux-progress
```

Using [pnpm](https://pnpm.io/):

```shell
$ pnpm install react-redux-progress
```

```js
// 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](https://unpkg.com):

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

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

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

```tsx
import { combineReducers } from 'redux';
import { progress } from 'react-redux-progress/reducer'

const rootReducers = combineReducers({
  progress,
  // other reducers
});

export default rootReducers;
```

Get progress status

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

```ts
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](https://github.com/NikaBuligini/react-redux-progress/issues) for requests.

I actively welcome pull requests; learn how to [contribute](https://github.com/NikaBuligini/react-redux-progress/blob/master/CONTRIBUTING.md).

## Tests

```shell
$ pnpm test
```

---
_Source: https://npm.io/package/react-redux-progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._