next-nprogress-bar - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

dist/index.d.ts

@@ -0,1 +1,3 @@
+/// <reference types="react" />
+import { useRouter } from './AppProgressBar';
 export interface NProgressOptions {
@@ -19,2 +21,3 @@ minimum?: number;
     shallowRouting?: boolean;
+    startPosition?: number;
     delay?: number;
@@ -25,2 +28,6 @@ style?: string;
 }
+export interface RouterNProgressOptions {
+    showProgressBar?: boolean;
+    startPosition?: number;
+}
 /**
@@ -31,8 +38,10 @@ * @param color Color of the progress bar. @default #0A2FFF
  * @param shallowRouting If the progress bar is not displayed when you use shallow routing - @default false
+ * @param startPosition The position of the progress bar at the start of the page load - @default 0
  * @param delay When the page loads faster than the progress bar, it does not display - @default 0
  * @param style Custom css - @default undefined
  * @param shouldCompareComplexProps If you want to compare props in the React.memo return - @default false
- * @param targetPreprocessor If you want to preprocess the target URL - @default undefined
+ * @param targetPreprocessor If you want to./AppProgressBaress the target URL - @default undefined
  */
-export { AppProgressBar, useRouter } from './appDir';
-export { PagesProgressBar } from './pagesDir';
+declare const AppProgressBar: (props: any) => import("react").JSX.Element;
+export { AppProgressBar, useRouter };
+export { PagesProgressBar } from './PagesProgressBar';

dist/index.js

@@ -22,3 +22,3 @@ 'use strict';
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
@@ -37,2 +37,7 @@
 
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 function isSameURL(target, current) {
@@ -87,4 +92,4 @@ var cleanTarget = target.protocol + '//' + target.host + target.pathname + target.search;
 
-var AppProgressBarComponent = React.memo(function (_a) {
-    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.shallowRouting, shallowRouting = _d === void 0 ? false : _d, _e = _a.delay, delay = _e === void 0 ? 0 : _e, style = _a.style, targetPreprocessor = _a.targetPreprocessor;
+var AppProgressBar$1 = React.memo(function (_a) {
+    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.shallowRouting, shallowRouting = _d === void 0 ? false : _d, _e = _a.startPosition, startPosition = _e === void 0 ? 0 : _e, _f = _a.delay, delay = _f === void 0 ? 0 : _f, style = _a.style, targetPreprocessor = _a.targetPreprocessor;
     var styles = (React.createElement("style", null, style ||
@@ -101,3 +106,7 @@ "\n          #nprogress {\n            pointer-events: none;\n          }\n\n          #nprogress .bar {\n            background: ".concat(color, ";\n\n            position: fixed;\n            z-index: 1031;\n            top: 0;\n            left: 0;\n\n            width: 100%;\n            height: ").concat(height, ";\n          }\n\n          /* Fancy blur effect */\n          #nprogress .peg {\n            display: block;\n            position: absolute;\n            right: 0px;\n            width: 100px;\n            height: 100%;\n            box-shadow: 0 0 10px ").concat(color, ", 0 0 5px ").concat(color, ";\n            opacity: 1.0;\n\n            -webkit-transform: rotate(3deg) translate(0px, -4px);\n                -ms-transform: rotate(3deg) translate(0px, -4px);\n                    transform: rotate(3deg) translate(0px, -4px);\n          }\n\n          /* Remove these to get rid of the spinner */\n          #nprogress .spinner {\n            display: block;\n            position: fixed;\n            z-index: 1031;\n            top: 15px;\n            right: 15px;\n          }\n\n          #nprogress .spinner-icon {\n            width: 18px;\n            height: 18px;\n            box-sizing: border-box;\n\n            border: solid 2px transparent;\n            border-top-color: ").concat(color, ";\n            border-left-color: ").concat(color, ";\n            border-radius: 50%;\n\n            -webkit-animation: nprogress-spinner 400ms linear infinite;\n                    animation: nprogress-spinner 400ms linear infinite;\n          }\n\n          .nprogress-custom-parent {\n            overflow: hidden;\n            position: relative;\n          }\n\n          .nprogress-custom-parent #nprogress .spinner,\n          .nprogress-custom-parent #nprogress .bar {\n            position: absolute;\n          }\n\n          @-webkit-keyframes nprogress-spinner {\n            0%   { -webkit-transform: rotate(0deg); }\n            100% { -webkit-transform: rotate(360deg); }\n          }\n          @keyframes nprogress-spinner {\n            0%   { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n          }\n        ")));
         var startProgress = function () {
-            timer = setTimeout(NProgress.start, delay);
+            timer = setTimeout(function () {
+                if (startPosition > 0)
+                    NProgress.set(startPosition);
+                NProgress.start();
+            }, delay);
         };
@@ -110,7 +119,8 @@ var stopProgress = function () {
             var anchorElement = event.currentTarget;
+            var anchorTarget = getAnchorProperty(anchorElement, 'target');
             // Skip anchors with target="_blank"
-            if (getAnchorProperty(anchorElement, 'target') === '_blank')
+            if (anchorTarget === '_blank')
                 return;
-            // Skip control/command+click
-            if (event.metaKey || event.ctrlKey)
+            // Skip control/command/option/alt+click
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
                 return;
@@ -124,3 +134,3 @@ var targetHref = getAnchorProperty(anchorElement, 'href');
                 return;
-            if ((targetUrl === null || targetUrl === void 0 ? void 0 : targetUrl.href) === (currentUrl === null || currentUrl === void 0 ? void 0 : currentUrl.href))
+            if (isSameURL(targetUrl, currentUrl))
                 return;
@@ -154,19 +164,25 @@ startProgress();
 }, function (prevProps, nextProps) {
-    if (!nextProps.shouldCompareComplexProps) {
+    if (!(nextProps === null || nextProps === void 0 ? void 0 : nextProps.shouldCompareComplexProps)) {
         return true;
     }
-    return (prevProps.color === nextProps.color &&
-        prevProps.height === nextProps.height &&
-        prevProps.shallowRouting === nextProps.shallowRouting &&
-        prevProps.delay === nextProps.delay &&
-        JSON.stringify(prevProps.options) === JSON.stringify(nextProps.options) &&
-        prevProps.style === nextProps.style);
+    return ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.color) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.color) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.height) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.height) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.shallowRouting) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.shallowRouting) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.startPosition) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.startPosition) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.delay) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.delay) &&
+        JSON.stringify(prevProps === null || prevProps === void 0 ? void 0 : prevProps.options) ===
+            JSON.stringify(nextProps === null || nextProps === void 0 ? void 0 : nextProps.options) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.style) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.style));
 });
-var AppProgressBar = function (props) { return (React.createElement(React.Suspense, { fallback: React.createElement(React.Fragment, null) },
-    React.createElement(AppProgressBarComponent, __assign({}, props)))); };
 function useRouter() {
     var router = navigation.useRouter();
-    var startProgress = React.useCallback(function (href, options, NProgressOptions) {
-        if ((NProgressOptions === null || NProgressOptions === void 0 ? void 0 : NProgressOptions.showProgressBar) === false)
+    var startProgress = React.useCallback(function (startPosition) {
+        if (startPosition && startPosition > 0)
+            NProgress.set(startPosition);
+        NProgress.start();
+    }, [router]);
+    var progress = React.useCallback(function (href, options, NProgressOptions) {
+        if ((NProgressOptions === null || NProgressOptions === void 0 ? void 0 : NProgressOptions.showProgressBar) === false) {
             return router.push(href, options);
+        }
         var currentUrl = new URL(location.href);
@@ -176,10 +192,10 @@ var targetUrl = new URL(href, location.href);
             return router.push(href, options);
-        NProgress.start();
+        startProgress(NProgressOptions === null || NProgressOptions === void 0 ? void 0 : NProgressOptions.startPosition);
     }, [router]);
     var push = React.useCallback(function (href, options, NProgressOptions) {
-        startProgress(href, options, NProgressOptions);
+        progress(href, options, NProgressOptions);
         return router.push(href, options);
     }, [router, startProgress]);
     var replace = React.useCallback(function (href, options, NProgressOptions) {
-        startProgress(href, options, NProgressOptions);
+        progress(href, options, NProgressOptions);
         return router.replace(href, options);
@@ -190,3 +206,3 @@ }, [router, startProgress]);
             return router.back();
-        NProgress.start();
+        startProgress(NProgressOptions === null || NProgressOptions === void 0 ? void 0 : NProgressOptions.startPosition);
         return router.back();
@@ -200,4 +216,11 @@ }, [router]);
 
+function withSuspense(Component) {
+    return function WithSuspenseComponent(props) {
+        return (React.createElement(React.Suspense, null,
+            React.createElement(Component, __assign({}, props))));
+    };
+}
+
 var PagesProgressBar = React.memo(function (_a) {
-    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.shallowRouting, shallowRouting = _d === void 0 ? false : _d, _e = _a.delay, delay = _e === void 0 ? 0 : _e, style = _a.style;
+    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.shallowRouting, shallowRouting = _d === void 0 ? false : _d, _e = _a.startPosition, startPosition = _e === void 0 ? 0 : _e, _f = _a.delay, delay = _f === void 0 ? 0 : _f, style = _a.style;
     var styles = (React.createElement("style", null, style ||
@@ -209,3 +232,7 @@ "\n          #nprogress {\n            pointer-events: none;\n          }\n          \n          #nprogress .bar {\n            background: ".concat(color, ";\n          \n            position: fixed;\n            z-index: 1031;\n            top: 0;\n            left: 0;\n          \n            width: 100%;\n            height: ").concat(height, ";\n          }\n          \n          /* Fancy blur effect */\n          #nprogress .peg {\n            display: block;\n            position: absolute;\n            right: 0px;\n            width: 100px;\n            height: 100%;\n            box-shadow: 0 0 10px ").concat(color, ", 0 0 5px ").concat(color, ";\n            opacity: 1.0;\n          \n            -webkit-transform: rotate(3deg) translate(0px, -4px);\n                -ms-transform: rotate(3deg) translate(0px, -4px);\n                    transform: rotate(3deg) translate(0px, -4px);\n          }\n          \n          /* Remove these to get rid of the spinner */\n          #nprogress .spinner {\n            display: block;\n            position: fixed;\n            z-index: 1031;\n            top: 15px;\n            right: 15px;\n          }\n          \n          #nprogress .spinner-icon {\n            width: 18px;\n            height: 18px;\n            box-sizing: border-box;\n          \n            border: solid 2px transparent;\n            border-top-color: ").concat(color, ";\n            border-left-color: ").concat(color, ";\n            border-radius: 50%;\n          \n            -webkit-animation: nprogress-spinner 400ms linear infinite;\n                    animation: nprogress-spinner 400ms linear infinite;\n          }\n          \n          .nprogress-custom-parent {\n            overflow: hidden;\n            position: relative;\n          }\n          \n          .nprogress-custom-parent #nprogress .spinner,\n          .nprogress-custom-parent #nprogress .bar {\n            position: absolute;\n          }\n          \n          @-webkit-keyframes nprogress-spinner {\n            0%   { -webkit-transform: rotate(0deg); }\n            100% { -webkit-transform: rotate(360deg); }\n          }\n          @keyframes nprogress-spinner {\n            0%   { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n          }\n        ")));
         var startProgress = function () {
-            timer = setTimeout(NProgress.start, delay);
+            timer = setTimeout(function () {
+                if (startPosition > 0)
+                    NProgress.set(startPosition);
+                NProgress.start();
+            }, delay);
         };
@@ -235,4 +262,29 @@ var stopProgress = function () {
     return styles;
-}, function () { return true; });
+}, function (prevProps, nextProps) {
+    if (!(nextProps === null || nextProps === void 0 ? void 0 : nextProps.shouldCompareComplexProps)) {
+        return true;
+    }
+    return ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.color) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.color) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.height) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.height) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.shallowRouting) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.shallowRouting) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.startPosition) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.startPosition) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.delay) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.delay) &&
+        JSON.stringify(prevProps === null || prevProps === void 0 ? void 0 : prevProps.options) ===
+            JSON.stringify(nextProps === null || nextProps === void 0 ? void 0 : nextProps.options) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.style) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.style));
+});
 
+/**
+ * @param color Color of the progress bar. @default #0A2FFF
+ * @param height Height of the progress bar. @default 2px
+ * @param options NProgress options. @default undefined
+ * @param shallowRouting If the progress bar is not displayed when you use shallow routing - @default false
+ * @param startPosition The position of the progress bar at the start of the page load - @default 0
+ * @param delay When the page loads faster than the progress bar, it does not display - @default 0
+ * @param style Custom css - @default undefined
+ * @param shouldCompareComplexProps If you want to compare props in the React.memo return - @default false
+ * @param targetPreprocessor If you want to./AppProgressBaress the target URL - @default undefined
+ */
+var AppProgressBar = withSuspense(AppProgressBar$1);
+
 exports.AppProgressBar = AppProgressBar;
@@ -239,0 +291,0 @@ exports.PagesProgressBar = PagesProgressBar;

package.json

 {
   "name": "next-nprogress-bar",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "NextJS progress bar compatible with new app directory",
@@ -43,5 +43,5 @@ "repository": {
     "babel-runtime": "^6.26.0",
-    "eslint": "^8.40.0",
-    "eslint-config-next": "^13.4.1",
-    "next": "^13.4.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.0",
+    "next": "^14.1.0",
     "react": "^18.2.0",
@@ -48,0 +48,0 @@ "react-dom": "^18.2.0",

README.md

@@ -31,2 +31,3 @@ <div align="center">
   - [shallowRouting](#shallowrouting)
+  - [startPosition](#startposition)
   - [delay](#delay)
@@ -38,2 +39,3 @@ - [style](#style)
   - [Import](#import)
+  - [Types](#types)
   - [Use](#use)
@@ -321,2 +323,6 @@ - [Migrating from v1 to v2](#migrating-from-v1-to-v2)
 
+### startPosition _optional_ - _number_
+
+The position the progress bar starts at from 0 to 1 - **by default 0**
+
 ### delay _optional_ - _number_
@@ -330,3 +336,3 @@
 
-### shouldCompareComplexProps _optional_ - _boolean_ - (_only for app directory progress bar_)
+### shouldCompareComplexProps _optional_ - _boolean_
 
@@ -353,2 +359,19 @@ Activates a detailed comparison of component props to determine if a rerender is necessary.
 
+### Types
+
+```tsx
+router.push(url: string, options?: NavigateOptions, NProgressOptions?: RouterNProgressOptions)
+router.replace(url: string, options?: NavigateOptions, NProgressOptions?: RouterNProgressOptions)
+router.back(NProgressOptions?: RouterNProgressOptions)
+```
+
+`NavigateOptions` is the options of the next router.
+
+```tsx
+interface RouterNProgressOptions {
+  showProgressBar?: boolean;
+  startPosition?: number;
+}
+```
+
 ### Use
@@ -358,3 +381,3 @@
 
-```jsx
+```tsx
 const router = useRouter();
@@ -366,19 +389,2 @@
 router.back();
-
-// Without progress bar
-router.push(
-  '/about',
-  {},
-  {
-    showProgressBar: false,
-  },
-);
-router.replace(
-  '/?counter=10',
-  {},
-  {
-    showProgressBar: false,
-  },
-);
-router.back({ showProgressBar: false });
 ```
@@ -385,0 +391,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64190

increased by20.54%

Lines of code

343

increased by19.1%

Number of lines in readme file

445

increased by1.37%

No dependency changes