Package Exports

react-redux-loading-bar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-redux-loading-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Redux Loading Bar

A simple React component that provides Loading Bar for long running tasks. Works out of the box with redux-promise-middleware and can be easily tweaked for other usage.

Consists of:

React component — displays loading bar and simulates progress
Redux reducer — manages loading bar's part of the store
Redux middleware — dispatches SHOW/HIDE for actions with promises

Examples

Demo link!

Installation

npm install --save react-redux-loading-bar

Usage

Mount the LoadingBar component anywhere in your application:

import LoadingBar from 'react-redux-loading-bar'

export default class Header extends React.Component {
  render() {
    return (
      <header>
        <LoadingBar />
      </header>
    )
  }
}

Good news is that it doesn't include any positioning, so you can attach it to the top of any block or the whole page.

Install the reducer to the store:

import { combineReducers } from 'redux'
import { loadingBarReducer } from 'react-redux-loading-bar'

const reducer = combineReducers({
  // app reducers
  loading: loadingBarReducer,
})

(Optional) Apply middleware to automatically show and hide loading bar on actions with promises:

import { createStore, applyMiddleware } from 'redux'
import { loadingBarMiddleware } from 'react-redux-loading-bar'
import rootReducer from './reducers'

const store = createStore(
  rootReducer,
  applyMiddleware(loadingBarMiddleware)
)

If you're not using redux-promise-middleware, you can skip installing the loadingBarMiddleware and dispatch SHOW/HIDE actions manually. The other option is to write your own middleware that will be similar to the bundled one.

Customizing

You can change the color and height of the Loading Bar:

<LoadingBar color="blue" height="5px" />

You can dispatch SHOW/HIDE actions wherever you want by importing the corresponding methods:

import { showLoading, hideLoading } from 'react-redux-loading-bar'

dispatch(showLoading())
// do long running stuff
dispatch(hideLoading())

You can dispatch SHOW action multiple times and the loading bar will be shown until the HIDE action is called for same times. In other words, the loading bar is shown until all long running tasks complete.

Tests

npm test

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Release History

1.0.0 Initial release