Coder Social home page Coder Social logo

minhnhut0602 / react-redux-loading-bar Goto Github PK

View Code? Open in Web Editor NEW

This project forked from mironov/react-redux-loading-bar

0.0 0.0 0.0 11.2 MB

Loading Bar (aka Progress Bar) for Redux and React

Home Page: https://mironov.github.io/react-redux-loading-bar/

License: MIT License

JavaScript 100.00%

react-redux-loading-bar's Introduction

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.

Demo GIF

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

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. 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.

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

export default class Header extends React.Component {
  render() {
    return (
      <header>
        <LoadingBar />
      </header>
      <section>
        <LoadingBar scope="sectionBar" />
      </section>
    )
  }
}

Install the reducer to the store:

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

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

Usage with redux-promise-middleware

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

Usage with custom scope (for multiple loading bars)

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.

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 without middleware but with scope

You need to provide the scope to the actions:

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

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

Usage with redux-saga

Install the loadingBarReducer() 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 immutable-js

You can change component import line if your top level redux store object is immutable.

import { ImmutableLoadingBar as LoadingBar } from 'react-redux-loading-bar'

// Mount LoadingBar component as usual

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.

RTL (Right-To-Left) Layout

Pass direction="rtl" to make Loading Bar simulate progress from right to left:

<LoadingBar direction="rtl" />

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 background-color: red; height: 3px; position: absolute;).

<LoadingBar className="loading" />

Don't forget to set height, background-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} />

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:

<LoadingBar showFastActions />

Reset progress

You can dispatch the resetLoading action to ultimately hide Loading Bar even when multiple long running tasks are still in progress.

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.

Contributors (in chronological order)

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

Licensed MIT. Copyright 2016-current Anton Mironov.

react-redux-loading-bar's People

Contributors

danielruf avatar dengbupapapa avatar dependabot[bot] avatar greenpart avatar hieuhlc avatar hugomn avatar janslow avatar josefernand avatar larrydahooster avatar mironov avatar neogermi avatar onchainguy-eth avatar vitosamson avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.