feat:add new props and update doc

README.md

@@ -25,8 +25,10 @@ yarn add react-page-progress
 | Props  |  Type  | isRequired | Example                                                                                                                                            |
 | :----- | :----: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------- |
 | color  | string |     No     | `'Default is SkyBlue'`, `'green'` or `'#fb6249'` or ` 'rgb(255, 26, 26)'``// If you want Progress bar Opaque, You can use rgba(...) or hsla(...) ` |
-| height | number |     No     | `'Should be a Number, 4 is default'`                                                                                                               |
-
+| thickness  | number |     No     | `'Should be a Number, default is 5'`                                                                                                                                     |
+| isVertical  | boolean |     No     | `'Should be a Boolean, default is false'`                                                                                                                                 |
+| speed  | number |     No     | `'Should be a Number in miliseconds, default is 200'`                                                                                                                                   |
+| isDirection   | string |     Yes     | `'Accepted values left/right & top/bottom'`                                                                                                                                |
 ### Demo
 
 **Watch Demo [Here](https://nomangul.github.io/react-page-progress)**

src/demo/App.js

@@ -7,7 +7,7 @@ export default class App extends Component {
   render() {
     return (
       <div className="divExample">
-        <PageProgress color={"#08bfd5"} height={5} />
+        <PageProgress color={"#08bfd5"} isVertical={false} speed ={200} isDirection="left" />
         <h1 className="hExample">React Page Progress Here!</h1>
         <p className="scrollIt">Just Scroll It</p>
         <Child />

src/lib/components/PageProgress.js

@@ -1,17 +1,17 @@
 import React, { useState, useEffect } from "react";
 
-const PageProgress = ({ color, height, ...props }) => {
-  const [width, setWidth] = useState(null);
+const PageProgress = ({ color, thickness, isVertical, speed, isDirection, ...props }) => {
+  const [dimension, setDimension] = useState(null);
 
   const watchScrolling = () => {
     const { scrollHeight, clientHeight, scrollTop } = document.documentElement;
     const winScroll = document.body.scrollTop || scrollTop;
     const winHeight = scrollHeight - clientHeight;
     const scrolled = `${(winScroll / winHeight) * 100}%`;
     if (winHeight > 0) {
-      return setWidth(scrolled);
+      return setDimension(scrolled);
     } else {
-      return setWidth(0);
+      return setDimension(0);
     }
   };
 
@@ -20,19 +20,19 @@ const PageProgress = ({ color, height, ...props }) => {
     return () => {
       window.removeEventListener("scroll", watchScrolling);
     };
-  }, [color, height]);
+  }, [color, thickness]);
 
   const styles = {
     progress: {
       marginTop: 0,
       padding: 0,
       background: color ? color : "skyblue",
       position: "fixed",
-      height: height ? height : 4,
-      width: width,
-      top: 0,
+      height: isVertical ? dimension : thickness || 5,
+      width: !isVertical ? dimension : thickness || 5,
+      [isDirection]: 0,
       zIndex: 99,
-      transition: "width 200ms ease-out"
+      transition: `${isVertical ? 'height' : 'width'} ${speed  || 200}ms ease-out`
     }
   };