Support custom color

README.md

@@ -1,18 +1,18 @@
-# react-md-progress-bar
+# react-md-progress
 React Component Material Design Progress Bar.
 
 ## Preview
 [![Preview](https://i.imgur.com/6ruGaji.gif)](http://i.imgur.com/19itcci.gifv)
 
 ## Installation
 
-    $ yarn add react-md-progress-bar
+    $ yarn add react-md-progress
 
 ## Example
 ```javascript
-import ProgressBar from 'react-md-progress-bar';
+import ProgressBar from 'react-md-progress';
 
-<ProgressBar show={true} overlay={true} />
+<ProgressBar show={true} overlay={true} color={"#FF6384"} />
 ```
 
 ## Props
@@ -21,3 +21,5 @@ Name | Description | Default/Required | Type
 ------|-------------|----------|-----------
 show | Show or hide ProgressBar. | required | bool
 overlay | Show or hide overlay. | optional | bool
+color | The color of the progress bar. | optional | string
+backgroundColor | Background color of the progress bar. | optional | string

dist/components/ProgressBar.js

@@ -40,7 +40,9 @@ var ProgressBar = function (_Component) {
 
     _this.state = {
       show: props.show,
-      overlay: props.overlay || false
+      overlay: props.overlay || false,
+      color: props.color,
+      backgroundColor: props.backgroundColor
     };
     return _this;
   }
@@ -56,7 +58,9 @@ var ProgressBar = function (_Component) {
     value: function componentWillReceiveProps(nextProps) {
       this.setState({
         show: nextProps.show,
-        overlay: nextProps.overlay || false
+        overlay: nextProps.overlay || false,
+        color: nextProps.color,
+        backgroundColor: nextProps.backgroundColor
       });
     }
 
@@ -69,7 +73,7 @@ var ProgressBar = function (_Component) {
     key: 'renderProgressBar',
     value: function renderProgressBar() {
       if (this.state.show) {
-        return _react2.default.createElement(_line.Line, null);
+        return _react2.default.createElement(_line.Line, { color: this.state.color, backgroundColor: this.state.backgroundColor });
       } else {
         return null;
       }
@@ -118,7 +122,18 @@ var ProgressBar = function (_Component) {
 
 ProgressBar.propTypes = {
   show: _propTypes2.default.bool,
-  overlay: _propTypes2.default.bool
+  overlay: _propTypes2.default.bool,
+  color: _propTypes2.default.string,
+  backgroundColor: _propTypes2.default.string
+};
+
+/**
+ * Default props
+ * @type {{color: string}}
+ */
+ProgressBar.defaultProps = {
+  backgroundColor: "#F2F2F2",
+  color: "#ff9800"
 };
 
 exports.default = ProgressBar;

dist/components/line.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Line = undefined;
 
 var _templateObject = _taggedTemplateLiteral(['\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n'], ['\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  background-color: #F2F2F2;\n  display: flex;\n  position: relative;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  height: 4px;\n  width: 100%;\n  margin: 0;\n\n  &:before {\n    height: 4px;\n    width: 100%;\n    margin: 0;\n    background-color: #ff9800;\n    content: \'\';\n    animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n'], ['\n  background-color: #F2F2F2;\n  display: flex;\n  position: relative;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  height: 4px;\n  width: 100%;\n  margin: 0;\n\n  &:before {\n    height: 4px;\n    width: 100%;\n    margin: 0;\n    background-color: #ff9800;\n    content: \'\';\n    animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n']);
+    _templateObject2 = _taggedTemplateLiteral(['\n  background-color: ', ';\n  display: flex;\n  position: relative;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  height: 4px;\n  width: 100%;\n  margin: 0;\n\n  &:before {\n    height: 4px;\n    width: 100%;\n    margin: 0;\n    background-color: ', ';\n    content: \'\';\n    animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n'], ['\n  background-color: ', ';\n  display: flex;\n  position: relative;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  height: 4px;\n  width: 100%;\n  margin: 0;\n\n  &:before {\n    height: 4px;\n    width: 100%;\n    margin: 0;\n    background-color: ', ';\n    content: \'\';\n    animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n']);
 
 var _styledComponents = require('styled-components');
 
@@ -18,4 +18,8 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 
 var runningProgressBar = (0, _styledComponents.keyframes)(_templateObject);
 
-var Line = exports.Line = _styledComponents2.default.div(_templateObject2, runningProgressBar);
+var Line = exports.Line = _styledComponents2.default.div(_templateObject2, function (props) {
+  return props.backgroundColor;
+}, function (props) {
+  return props.color;
+}, runningProgressBar);

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "react-md-progress-bar",
-  "version": "0.0.2",
-  "description": "React Component Material Design Progress bar",
+  "name": "react-md-progress",
+  "version": "0.0.3",
+  "description": "React Customizable Material Design Progress bar. This library is a fork of Paulo McNally's react-md-progress-bar. See https://github.com/mcnallydev/react-md-progress-bar",
   "main": "index.js",
-  "repository": "https://github.com/mcnallydev/react-md-progress-bar.git",
-  "author": "Paulo McNally <paulomcnally@gmail.com>",
+  "repository": "https://github.com/Euler-KB/react-md-progress-bar.git",
+  "author": "Kofi Boahene <euler-kb@live.com>",
   "license": "MIT",
   "files": [
     "dist"

src/components/ProgressBar.js

@@ -12,7 +12,9 @@ class ProgressBar extends Component {
     super(props);
     this.state = {
       show: props.show,
-      overlay: props.overlay || false
+      overlay: props.overlay || false,
+      color: props.color,
+      backgroundColor: props.backgroundColor
     }
   }
 
@@ -23,7 +25,9 @@ class ProgressBar extends Component {
   componentWillReceiveProps(nextProps) {
     this.setState({
       show: nextProps.show,
-      overlay: nextProps.overlay || false
+      overlay: nextProps.overlay || false,
+      color: nextProps.color,
+      backgroundColor: nextProps.backgroundColor
     });
   }
 
@@ -34,7 +38,7 @@ class ProgressBar extends Component {
   renderProgressBar() {
     if (this.state.show) {
       return (
-        <Line />
+        <Line color={this.state.color} backgroundColor={this.state.backgroundColor} />
       );
     } else {
       return (null);
@@ -75,7 +79,18 @@ class ProgressBar extends Component {
  */
 ProgressBar.propTypes = {
   show: PropTypes.bool,
-  overlay: PropTypes.bool
+  overlay: PropTypes.bool,
+  color: PropTypes.string,
+  backgroundColor: PropTypes.string
+};
+
+/**
+ * Default props
+ * @type {{color: string}}
+ */
+ProgressBar.defaultProps ={
+    backgroundColor: "#F2F2F2",
+    color: "#ff9800"
 };
 
 export default ProgressBar;

src/components/line.js

@@ -13,10 +13,10 @@ const runningProgressBar = keyframes`
     margin-left: 100%;
     margin-right: 0;
   }
-`
+`;
 
 export const Line = styled.div`
-  background-color: #F2F2F2;
+  background-color: ${props => props.backgroundColor};
   display: flex;
   position: relative;
   top: 0;
@@ -30,8 +30,8 @@ export const Line = styled.div`
     height: 4px;
     width: 100%;
     margin: 0;
-    background-color: #ff9800;
+    background-color: ${props => props.color};
     content: '';
     animation: ${runningProgressBar} 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   }
-`
+`;