Merge pull request #9 from LFerronato/master

feat: add shadow config prop

README.md

@@ -66,25 +66,27 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
 
 ```jsx
 <NextTopLoader
-  color="#29D"
+  color="#2299DD"
   initialPosition={0.08}
   crawlSpeed={200}
   height={3}
   crawl={true}
   showSpinner={true}
   easing="ease"
   speed={200}
+  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
 />
 ```
 
 - `color`: to change the default color of TopLoader.
 - `initialPosition`: to change initial position for the TopLoader in percentage, : `0.08 = 8%`.
-- `crawlSpeed`: increament delay speed in `ms`.
+- `crawlSpeed`: increment delay speed in `ms`.
 - `speed`: animation speed for the TopLoader in `ms`
 - `easing`: animation settings using easing (a CSS easing string).
 - `height`: height of TopLoader in `px`.
-- `crawl`: auto increamenting behaviour for the TopLoader.
+- `crawl`: auto incrementing behavior for the TopLoader.
 - `showSpinner`: to show spinner or not.
+- `shadow`: a smooth shadow for the TopLoader. (set to `false` to disable it)
 
 [![Sponsor me on GitHub](https://img.shields.io/badge/Sponsor%20me%20on-GitHub-brightgreen)](https://github.com/sponsors/TheSGJ)
 

src/index.tsx

@@ -53,35 +53,51 @@ export type NextTopLoaderProps = {
    * @default 200
    */
   speed?: number;
+  /**
+   * Defines a shadow for the TopLoader.
+   * @default "0 0 10px ${color},0 0 5px ${color}"
+   *
+   * @ you can disable it by setting it to `false`
+   */
+  shadow?: string | false;
 }
 
 const NextTopLoader = ({
-  color,
-  height,
+  color: propColor,
+  height: propHeight,
   showSpinner,
   crawl,
   crawlSpeed,
   initialPosition,
   easing,
   speed,
+  shadow,
 }: NextTopLoaderProps) => {
   const defaultColor = '#29d';
   const defaultHeight = 3;
 
+  const color = propColor ?? defaultColor;
+  const height = propHeight ?? defaultHeight;
+
+  // Any falsy (except undefined) will disable the shadow
+  const boxShadow = !shadow && shadow !== undefined
+    ? ''
+    : shadow
+      ? `box-shadow:${shadow}`
+      : `box-shadow:0 0 10px ${color},0 0 5px ${color}`;
+
   const styles = (
     <style>
       {`#nprogress{pointer-events:none}#nprogress .bar{background:${
-        color ?? defaultColor
+        color
       };position:fixed;z-index:1031;top:0;left:0;width:100%;height:${
-        height ?? defaultHeight
-      }px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px ${
-        color ?? defaultColor
-      },0 0 5px ${
-        color ?? defaultColor
+        height
+      }px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;${
+        boxShadow
       };opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${
-        color ?? defaultColor
+        color
       };border-left-color:${
-        color ?? defaultColor
+        color
       };border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`}
     </style>
   );
@@ -183,4 +199,8 @@ NextTopLoader.propTypes = {
   initialPosition: PropTypes.number,
   easing: PropTypes.string,
   speed: PropTypes.number,
+  shadow: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
 };