npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-redux-loading-bar2

v1.0.0

Published

Simple Loading Bar for Redux and React

Downloads

4

Readme

React Redux Loading Bar

npm version build status coverage status npm downloads dependency status

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

Demo GIF

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

See Demo or its source code.

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
  loadingBar: 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,
  // promise middleware
  applyMiddleware(loadingBarMiddleware())
)

Usage with custom suffixes or another Promise Middleware

You can configure promise type suffixes that are used in your project:

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'],
    })
  )
)

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.

Usage without middleware

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

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.

Usage with redux-saga

Install the loadingBarMiddleware() and mount Loading Bar in your application. You can import and dispatch showLoading and hideLoading from your sagas.

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())
  }
}

Usage with jQuery Ajax Requests

If you happen to use jQuery for Ajax requests, you can dispatch SHOW/HIDE actions on ajaxStart/ajaxStop global events:

$(document).on('ajaxStart', this.props.actions.showLoading)
$(document).on('ajaxStop', this.props.actions.hideLoading)

See a demo or checkout the code.

Styling

You can apply custom styling right on the LoadingBar component. For example you can change the color and height of the loading bar:

<LoadingBar style={{ backgroundColor: 'blue', height: '5px' }} />

Alternatively, you can specify your own CSS class.

Please note that will disable default styling (which is color: red; height: 3px; position: absolute;).

<LoadingBar className="loading" />

Don't forget to set height, color and position for the loading class in your CSS files.

Configure Progress Simulation

You can change updateTime (by default 200ms), maxProgress (by default 90%) and progressIncrease (by default 5%):

<LoadingBar updateTime={100} maxProgress={95} progressIncrease={10} />

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.

To see what has changed in recent versions of Loading Bar, see the CHANGELOG.

Licensed MIT. Copyright 2016-current Anton Mironov.