milworm / react-progress-2

ReactJS Progress 2

YouTube style progress bar for ReactJS

Installation

NPM

npm install react-progress-2

JSPM

jspm install npm:react-progress-2

Usage

Include react-progress-2/main.css to your project. With SystemJS CSS plugin you simply need to write this line:

import "react-progress-2/main.css!"

Include react-progress-2 and put it somewhere in the top-component, for example:

import React from "react";
import Progress from "react-progress-2";

var Layout = React.createClass({
    render: function() {
        return (
            <div className="layout">
                <Progress.Component/>
                {/* other components go here*/}
            </div>
        );
    }
});

Now, whenever you need to show an indicator, just call Progress#show, for example:

loadFeed: function() {
    Progress.show();
    // do your ajax thing.
},

onLoadFeedCallback: function() {
    Progress.hide();
    // render feed.
}

Please note, that show and hide calls are stacked, so after n-consecutive show calls, you need to do n hide calls to hide an indicator or you can use Progress.hideAll().

Styling

Option #1

.loader-60devs .loader-60devs-progress {
    background: #ff6f00;
}

Option #2

  <Progress.Component
    style={{background: 'orange'}}
    thumbStyle={{background: 'green'}} />

Examples

Examples

Contribution

Do the following steps if you have the willing to fix a bug or just add some features to react-progress-2

cd dev
npm install
jspm install
gulp watch
# change the world!

Authors and Contributors

Created in 2015 by Ruslan Prytula (@milworm).

react-progress-2's Issues

How to use it on Action using redux?

in my transactionAction.js

import React from 'react';
import Progress from "react-progress-2";

export let getTransactions = () => {
   return dispatch => {
     Progress.show();
     ...
  }
}

I got an error:

Cannot read property '__reactInternalInstance$seae8adebsh' of null
 at Object.getClosestInstanceFromNode (eval at <anonymous> (app.js:1447), <anonymous>:113:11)
    at findParent (eval at <anonymous> (app.js:2011), <anonymous>:38:32)
    at handleTopLevelImpl (eval at <anonymous> (app.js:2011), <anonymous>:67:28)
    at ReactDefaultBatchingStrategyTransaction.perform (eval at <anonymous> (app.js:1579)<anonymous>:140:20)
    at Object.batchedUpdates (eval at <anonymous> (app.js:2005), <anonymous>:62:26)
    at Object.batchedUpdates (eval at <anonymous> (app.js:1561), <anonymous>:97:27)
    at dispatchEvent (eval at <anonymous> (app.js:2011), <anonymous>:147:20)

Uncaught TypeError: Cannot read property 'show' of undefined

Hi I am using Progress Component in multiple component on load. when i load one component is working fine. and the next component load is load, progress coponent work fine for this component, then load data for first component, it showing error "Uncaught TypeError: Cannot read property 'show' of undefined".

please give solution

consecutive calls to show/hide is broken

I've forked and fixed it here, I need this right away so I didn't have time to make a PR, this is just an FYI

https://github.com/kolodny/react-progress-2/commit/fcfdb39fbfbf98bcd00b2e7ce8e1abd5a725e796#diff-1c90ff38a08209f9ebd4d05d1e43358eL1

Implement #isVisible() and #hideAll() methods

@austinmao

Ready in 4.2.0.

Getting `show of undefined` error when using in componentWillMount()

I want to use this as an indicator async loading indicator to indicate async route transitions. I have tried this below but it doesn't work because the component is not yet defined:

      componentWillMount() {
        if (!shouldNotShowProgressBar) {
          console.log('loading', api);
          Progress.show();
        }
      }

      componentDidMount() {
        if (!shouldNotShowProgressBar) {
          console.log('loaded', api);
          Progress.hide();
        }
      }

Do you have a working example of this?

Avoid componentWillMount

I think you should replace componentWillMount due to https://reactjs.org/docs/react-component.html#unsafe_componentwillmount by using componentDidMount.
It's always throw an error when using hot reload.

Uncaught ReferenceError: Progress is not defined

Hi @milworm ,

I am trying to use your react-progress-2 to in my project. But, I got Progress is not defined error message. I don't know what I did missing. need your help...

Thank you,

Here is my code:

my header area: 1. header.js
import React,{Component} from 'react';
import { Link, IndexLink } from 'react-router';
import Progress from "react-progress-2";
export default class Header extends Component {
constructor(){
super();
}
render(){
return(

<Progress.Component/>
);
}

}

my signin page:
import React, { Component, PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import * as api from '../api/authRepository';
export const fields = [ 'userName', 'password' ]

class Signin extends Component {
handleFormSubmit({ userName, password }) {
Progress.show(); // got error on this area
this.props.signinUser({ userName, password });
}

Configurable overlay.

Will be cool if we could add an ability to show loader with or without transparent blocking overlay.

'window is not defined' when rendering on server

Using react-progress-2 with https://github.com/erikras/react-redux-universal-hot-example results in error below with v4.2.0

[1] [piping] error given was: ReferenceError: window is not defined
[1]     at [object Object].componentWillMount (/Users/austinmao/Sites/aditive-frontend/node_modules/react-progress-2/lib/main.js:73:9)
[1]     at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/austinmao/Sites/aditive-frontend/node_modules/react/lib/ReactCompositeComponent.js:210:12)
[1]     at [object Object].wrapper [as mountComponent] (/Users/austinmao/Sites/aditive-frontend/node_modules/react/lib/ReactPerf.js:66:21)
[1]     at Object.ReactReconciler.mountComponent (/Users/austinmao/Sites/aditive-frontend/node_modules/react/lib/ReactReconciler.js:37:35)
[1]     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/austinmao/Sites/aditive-frontend/node_modules/react/lib/ReactMultiChild.js:241:44)
[1]     at ReactDOMComponent.Mixin._createContentMarkup (/Users/austinmao/Sites/aditive-frontend/node_modules/react/lib/ReactDOMComponent.js:591:32)
[1]     at ReactDOMComponent.Mixin.mountComponent (/Users/austinmao/Sites/aditive-frontend/node_modules/react/lib/ReactDOMComponent.js:479:29)
[1]     at Object.ReactReconciler.mountComponent (/Users/austinmao/Sites/aditive-frontend/node_modules/react/lib/ReactReconciler.js:37:35)
[1]     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/austinmao/Sites/aditive-frontend/node_modules/react/lib/ReactMultiChild.js:241:44)
[1]     at ReactDOMComponent.Mixin._createContentMarkup (/Users/austinmao/Sites/aditive-frontend/node_modules/react/lib/ReactDOMComponent.js:591:32)

Maybe need to put window ref in componentDidMount?

unable to hide progress if show more than one time

Due to connect with react redux, progress.show has been invoked twice. Once this happened, I cannot hide it unless i call progress.hide twice as well

Use 'create-react-class' npm package instead of 'React.createClass'

React.createClass has been deprecated in React v15.5.0, and a warning is displayed if it's used.

See Migrating from React.createClass

Solution: Either migrate to ES6 classes or use the drop-in replacement create-react-class package.

Got an error when using Progress.show()

Got this error when I call Progress.show(); in my action.

Issue with react-router

Hi!

When I refresh the browser not on index page (for example /users) - I got an error

Uncaught (in promise) TypeError: Cannot read property 'querySelector' of undefined at Constructor.show (main.js:49)
If I start from main page ('/') - all is ok

I use react-router, probably it is the reason of this issue.
Is there some way to fix it?
I've tried to use <Progress.Component/> in parent component.
Also I've tried to place it over Router

<div>
  <Progress.Component/>
   <Router>
      ....
   </Router>
</div>

Take background color as property

I have a page that uses dynamic styling. Would it be possible to accept the color of the progress bar as a property?

React 16 warning: Setting defaultProps as an instance property on Component is not supported and will be ignored. Instead, define defaultProps as a static property on Component.

defaultProps = {
	cls: '',
	style: {},
	thumbStyle: {}
}

need add static.

NOT WORKING IN REACT JS 16.4.0

NOT WORKING IN REACT JS 16.4.0