Simple Loading Bar for Redux and React
npm install @dimasmds/react-redux-loading-bar> This is the fork version of https://github.com/mironov/react-redux-loading-bar to keep compatibility of library that used in Menjadi React Web Developer Expert course.
A React component that provides Loading Bar (aka Progress Bar) for long running tasks.
Consists of:
* React component — displays loading bar and simulates progress
* Redux reducer — manages loading bar's part of the store
* (optional) Redux middleware — automatically shows and hides Loading Bar for actions with promises
See Demo or its source code.
``bash`
npm install --save react-redux-loading-bar
Mount the LoadingBar component anywhere in your application:
`jsx
import LoadingBar from 'react-redux-loading-bar'
export default class Header extends React.Component {
render() {
return (
)
}
}
`
Good news is that it doesn't include any positioning. You can attach it to the top of any block or the whole page.
You can even include multiple loading bars on the same page, that will render independently. They need to be provided with
a scope so that you can adjust them independently.
`jsx
import LoadingBar from 'react-redux-loading-bar'
export default class Header extends React.Component {
render() {
return (
)
}
}
`
Install the reducer to the store:
`jsx
import { combineReducers } from 'redux'
import { loadingBarReducer } from 'react-redux-loading-bar'
const reducer = combineReducers({
// app reducers
loadingBar: loadingBarReducer,
})
`
Apply middleware to automatically show and hide loading bar on actions with promises:
`jsx
import { createStore, applyMiddleware } from 'redux'
import { loadingBarMiddleware } from 'react-redux-loading-bar'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
// promise middleware
applyMiddleware(loadingBarMiddleware())
)
`
You can configure promise type suffixes that are used in your project:
`jsx
import { createStore, applyMiddleware } from 'redux'
import { loadingBarMiddleware } from 'react-redux-loading-bar'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(
loadingBarMiddleware({
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
})
)
)
`
`jsx
import { createStore, applyMiddleware } from 'redux'
import { loadingBarMiddleware } from 'react-redux-loading-bar'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(
loadingBarMiddleware({
scope: 'sectionBar',
})
)
)
`
If you're not using redux-promise-middleware or any other 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.
You can dispatch SHOW/HIDE actions wherever you want by importing the corresponding action creators:
`jsx
import { showLoading, hideLoading } from 'react-redux-loading-bar'
dispatch(showLoading())
// do long running stuff
dispatch(hideLoading())
`
You need to dispatch HIDE as many times as SHOW was dispatched to make the bar disappear. In other words, the loading bar is shown until all long running tasks complete.
You need to provide the scope to the actions:
`jsx
import { showLoading, hideLoading } from 'react-redux-loading-bar'
dispatch(showLoading('sectionBar'))
// do long running stuff
dispatch(hideLoading('sectionBar'))
`
Install the loadingBarReducer() and mount Loading Bar in your application.showLoading
You can import and dispatch and hideLoading from your sagas.
`jsx
import { showLoading, hideLoading } from 'react-redux-loading-bar'
export function* fetchData() {
try {
yield put(showLoading())
const payload = yield call(API, params)
// payload processing
} finally {
yield put(hideLoading())
}
}
`
You can change component import line if your top level redux store object is immutable.
`jsx
import { ImmutableLoadingBar as LoadingBar } from 'react-redux-loading-bar'
// Mount LoadingBar component as usual
`
If you happen to use jQuery for Ajax requests, you can dispatch SHOW/HIDE actions on ajaxStart/ajaxStop global events:
`jsx`
$(document).on('ajaxStart', this.props.actions.showLoading)
$(document).on('ajaxStop', this.props.actions.hideLoading)
See a demo or checkout the code.
Pass direction="rtl" to make Loading Bar simulate progress from right to left:
`jsx`
You can apply custom styling right on the LoadingBar component. For example you can change the color and height of the loading bar:
`jsx`
Alternatively, you can specify your own CSS class.
Please note that will disable default styling (which is background-color: red; height: 3px; position: absolute;).
`jsx`
Don't forget to set height, background-color and position for the loading class in your CSS files.
You can change updateTime (by default 200ms), maxProgress (by default 90%) and progressIncrease (by default 5%):
`jsx`
By default, the Loading Bar will only display if the action took longer than updateTime to finish. This helps keep things feeling snappy, and avoids the annoyingness of showing a Loading Bar for fractions of seconds. If you want to show Loading Bar even on quickly finished actions you can pass the showFastActions prop:
`jsx`
You can dispatch the resetLoading action to ultimately hide Loading Bar even when multiple long running tasks are still in progress.
`bash``
npm test
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.
- @mironov
- @ThomasMarnet
- @hieuhlc
- @josefernand
- @greenpart
- @larrydahooster
- @janslow
- @vitosamson
- @seb0zz
- @neogermi
- @MikeDevice
- @Kovensky
- @dengbupapapa
To see what has changed in recent versions of Loading Bar, see the CHANGELOG.
Licensed MIT. Copyright 2016-current Anton Mironov.