react-scroll-progress-bar - npm Package Compare versions

Comparing version 1.0.12 to 1.1.0

package.json

 {
   "name": "react-scroll-progress-bar",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "description": "A scroll progress bar component for React",
@@ -35,5 +35,13 @@ "main": "build/index.js",
     "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-import": "^2.17.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.12.4",
     "webpack": "^4.30.0",
-    "webpack-cli": "^3.3.0"
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1"
   },
@@ -40,0 +48,0 @@ "dependencies": {

README.md

@@ -10,4 +10,2 @@ # react-scroll-progress-bar
 
-----
-
 ## Usage
@@ -45,3 +43,3 @@
             <div>
-                <ProgressBar height="6px" bgcolor="#000" />
+                <ProgressBar height="6" bgcolor="#000" duration="0.2" />
                   // Here you can add any react component or jsx
@@ -62,11 +60,14 @@ // Add ProgressBar at your top level component or Root component.
     <ProgressBar
-      height="4px"
+      height="4"
       bgcolor="#F43059"
+      duration="0.2"
     />
 ```
 
-height -- Set height of progress bar. Default height is `4px`.
+height -- Set height of progress bar. Default height is `4px`. Pass the number not the unit. Unit is `px`
 
 bgcolor -- Set background-color of progress bar. Default background-color is `#F43059`.
 
-----
+duration -- Set timing-duration for transition property. Default is `0.2s`. Pass the number not the unit. Unit is `s`
+
+----

src/index.js

 import PropTypes from "prop-types";
 import React, { Component } from "react";
 
-const scrollStyle = (width, height = "4px", bgcolor = "#F43059") => ({
+const scrollStyle = (width, height = "4", bgcolor = "#F43059", duration = "0.2") => ({
   margin: 0,
@@ -11,5 +11,5 @@ padding: 0,
   backgroundColor: `${bgcolor}`,
-  height: `${height}`,
+  height: `${height}px`,
   width: `${width}`,
-  transition: `${width} 0.2s ease-out`
+  transition: `${width} ${duration}s ease`,
 });
@@ -58,4 +58,4 @@
     const { width } = this.state;
-    const { height, bgcolor } = this.props;
-    return (<div style={scrollStyle(width, height, bgcolor)} />);
+    const { height, bgcolor, duration } = this.props;
+    return <div style={scrollStyle(width, height, bgcolor, duration)} />;
   }
@@ -66,2 +66,3 @@ }
   height: PropTypes.number,
+  duration: PropTypes.number,
   color: PropTypes.string.isRequired
@@ -68,0 +69,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

9471

increased by6.02%

Lines of code

60

increased by1.69%

Number of lines in readme file

71

increased by2.9%

Worsened metrics

Dev dependency count

14

increased by133.33%

No dependency changes