Add className prop

README.md

@@ -63,6 +63,7 @@ Example [here](http://codepen.io/vn38minhtran/pen/QjaZrm)
 | autoIncrement | bool | false | if `true` percent will auto increment `Math.random() + 1 - Math.random()`% in `intervalTime` ms. |
 | intervalTime | number | 200 | Interval time for auto increment. |
 | spinner | oneOf([false, 'left', 'right'])   | left | Spinner position. Pass `false` to hide spinner icon. |
+| className | string |  | Custom class |
 
 ## Example
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-progress-bar-plus",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Progress bar component for ReactJS.",
   "main": ["dist/progress-bar.css", "dist/react-progress-bar-plus.js"],
   "keywords": [

example/app/components/pages/Home/index.js

@@ -19,7 +19,7 @@ class PageHome extends React.Component {
     return (
       <Document title="Home | React progress bar plus" className="page-home">
         <div>
-          <ProgressBar percent={this.state.percent}/>
+          <ProgressBar className="custom-class" percent={this.state.percent}/>
           <div className="text-center">
             <div className="btn-group">
               <button className="btn btn-default" onClick={this.setPercent(0)}>

lib/ProgressBar.js

@@ -100,9 +100,10 @@ var ProgressBar = (function (_React$Component) {
       var _props = this.props;
       var onTop = _props.onTop;
       var spinner = _props.spinner;
+      var className = _props.className;
       var percent = this.state.percent;
 
-      var className = (0, _classnames3['default'])('react-progress-bar', {
+      className = (0, _classnames3['default'])('react-progress-bar', className, {
         'react-progress-bar-on-top': onTop,
         'react-progress-bar-hide': percent < 0 || percent >= 100
       });
@@ -122,6 +123,7 @@ var ProgressBar = (function (_React$Component) {
   }], [{
     key: 'propTypes',
     value: {
+      className: _react2['default'].PropTypes.string,
       percent: _react2['default'].PropTypes.number.isRequired,
       onTop: _react2['default'].PropTypes.bool,
       autoIncrement: _react2['default'].PropTypes.bool,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-progress-bar-plus",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Progress bar component for ReactJS.",
   "main": "lib/index.js",
   "scripts": {

src/ProgressBar.js

@@ -78,9 +78,9 @@ class ProgressBar extends React.Component {
   };
 
   render() {
-    let {onTop, spinner} = this.props;
+    let {onTop, spinner, className} = this.props;
     let {percent} = this.state;
-    let className = classnames('react-progress-bar', this.props.className, {
+    className = classnames('react-progress-bar', className, {
       'react-progress-bar-on-top': onTop,
       'react-progress-bar-hide': percent < 0 || percent >= 100
     });