Merge pull request #48 from anamiikajha/show-at-bottom

feat: show TopLoader bottom

Author: TheSGJ

README.md

@@ -1,6 +1,6 @@
 # Next Js TopLoader
 
-- A Next.js Top Loading Bar component made using nprogress, works with Next.js 13.
+- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14.
 
 ## Install
 
@@ -90,8 +90,9 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
 - `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)
-- `template`: to include custom HTML attributes for the TopLoader. 
+- `template`: to include custom HTML attributes for the TopLoader.
 - `zIndex`: defines zIndex for the TopLoader.
+- `showAtBottom`: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-toploader",
-  "version": "1.5.3",
+  "version": "1.6.3",
   "description": "A Next.js Top Loading Bar component made using nprogress, works with Next.js 13.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,6 +18,7 @@
     "Next",
     "Next TopLoader",
     "Next.js",
+    "Next.js 14",
     "Next.js 13",
     "Nprogress",
     "React",

src/index.tsx

@@ -66,12 +66,18 @@ export type NextTopLoaderProps = {
    * <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>"
    */
   template?: string;
-   /**
+  /**
    * Defines zIndex for the TopLoader.
    * @default 1600
    *
    */
   zIndex?: number;
+  /**
+   * To show the TopLoader at bottom.
+   * @default false
+   *
+   */
+  showAtBottom?: boolean;
 };
 
 const NextTopLoader = ({
@@ -86,6 +92,7 @@ const NextTopLoader = ({
   shadow,
   template,
   zIndex = 1600,
+  showAtBottom = false,
 }: NextTopLoaderProps) => {
   const defaultColor = '#29d';
   const defaultHeight = 3;
@@ -101,9 +108,12 @@ const NextTopLoader = ({
       ? `box-shadow:${shadow}`
       : `box-shadow:0 0 10px ${color},0 0 5px ${color}`;
 
+  // Check if to show at bottom
+  const positionStyle = showAtBottom ? 'bottom: 0;' : 'top: 0;';
+
   const styles = (
     <style>
-      {`#nprogress{pointer-events:none}#nprogress .bar{background:${color};position:fixed;z-index:${zIndex};top:0;left:0;width:100%;height:${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:${zIndex};top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${color};border-left-color:${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)}}`}
+      {`#nprogress{pointer-events:none}#nprogress .bar{background:${color};position:fixed;z-index:${zIndex};${positionStyle}left:0;width:100%;height:${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:${zIndex};${positionStyle}right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${color};border-left-color:${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>
   );
 
@@ -212,4 +222,5 @@ NextTopLoader.propTypes = {
   template: PropTypes.string,
   shadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   zIndex: PropTypes.number,
+  showAtBottom: PropTypes.bool,
 };