next-nprogress-bar - npm Package Compare versions

Comparing version 2.3.9 to 2.3.10

dist/AppProgressBar.d.ts

 import React from 'react';
 import { ProgressBarProps, RouterNProgressOptions } from '.';
 import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
-export declare const AppProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, startPosition, delay, stopDelay, style, nonce, targetPreprocessor, }: ProgressBarProps) => React.JSX.Element>;
+export declare const AppProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, targetPreprocessor, }: ProgressBarProps) => React.JSX.Element>;
 export declare function useRouter(): {
@@ -6,0 +6,0 @@ push: (href: string, options?: NavigateOptions, NProgressOptions?: RouterNProgressOptions) => void;

dist/index.d.ts

@@ -34,2 +34,3 @@ /// <reference types="react" />
     shallowRouting?: boolean;
+    disableSameURL?: boolean;
     startPosition?: number;
@@ -40,2 +41,3 @@ delay?: number;
     nonce?: string;
+    memo?: boolean;
     shouldCompareComplexProps?: boolean;
@@ -42,0 +44,0 @@ targetPreprocessor?: (url: URL) => URL;

dist/index.js

@@ -91,3 +91,3 @@ 'use strict';
 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, _g = _a.stopDelay, stopDelay = _g === void 0 ? 0 : _g, style = _a.style, nonce = _a.nonce, targetPreprocessor = _a.targetPreprocessor;
+    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.disableSameURL, disableSameURL = _e === void 0 ? true : _e, _f = _a.startPosition, startPosition = _f === void 0 ? 0 : _f, _g = _a.delay, delay = _g === void 0 ? 0 : _g, _h = _a.stopDelay, stopDelay = _h === void 0 ? 0 : _h, style = _a.style, nonce = _a.nonce, targetPreprocessor = _a.targetPreprocessor;
     var styles = (React.createElement("style", { nonce: nonce }, style ||
@@ -123,3 +123,11 @@ "\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 handleAnchorClick = function (event) {
+            // Skip preventDefault
+            if (event.defaultPrevented)
+                return;
             var anchorElement = event.currentTarget;
+            var target = event.target;
+            var preventProgress = (target === null || target === void 0 ? void 0 : target.getAttribute('data-prevent-nprogress')) === 'true' ||
+                (anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.getAttribute('data-prevent-nprogress')) === 'true';
+            if (preventProgress)
+                return;
             var anchorTarget = getAnchorProperty(anchorElement, 'target');
@@ -137,5 +145,7 @@ // Skip anchors with target="_blank"
             var currentUrl = new URL(location.href);
-            if (shallowRouting && isSameURLWithoutSearch(targetUrl, currentUrl))
+            if (shallowRouting &&
+                isSameURLWithoutSearch(targetUrl, currentUrl) &&
+                disableSameURL)
                 return;
-            if (isSameURL(targetUrl, currentUrl))
+            if (isSameURL(targetUrl, currentUrl) && disableSameURL)
                 return;
@@ -159,3 +169,3 @@ startProgress();
             validAnchorElements.forEach(function (anchor) {
-                anchor.addEventListener('click', handleAnchorClick);
+                anchor.addEventListener('click', handleAnchorClick, true);
             });
@@ -174,2 +184,5 @@ };
 }, function (prevProps, nextProps) {
+    if ((nextProps === null || nextProps === void 0 ? void 0 : nextProps.memo) === false) {
+        return false;
+    }
     if (!(nextProps === null || nextProps === void 0 ? void 0 : nextProps.shouldCompareComplexProps)) {
@@ -183,2 +196,5 @@ return true;
         (prevProps === null || prevProps === void 0 ? void 0 : prevProps.delay) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.delay) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.disableSameURL) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.disableSameURL) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.stopDelay) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.stopDelay) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.nonce) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.nonce) &&
         JSON.stringify(prevProps === null || prevProps === void 0 ? void 0 : prevProps.options) ===
@@ -233,3 +249,3 @@ JSON.stringify(nextProps === null || nextProps === void 0 ? void 0 : nextProps.options) &&
 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.startPosition, startPosition = _e === void 0 ? 0 : _e, _f = _a.delay, delay = _f === void 0 ? 0 : _f, _g = _a.stopDelay, stopDelay = _g === void 0 ? 0 : _g, style = _a.style, nonce = _a.nonce;
+    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.disableSameURL, disableSameURL = _e === void 0 ? true : _e, _f = _a.startPosition, startPosition = _f === void 0 ? 0 : _f, _g = _a.delay, delay = _g === void 0 ? 0 : _g, _h = _a.stopDelay, stopDelay = _h === void 0 ? 0 : _h, style = _a.style, nonce = _a.nonce;
     var styles = (React.createElement("style", { nonce: nonce }, style ||
@@ -257,3 +273,4 @@ "\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 currentUrl = new URL(Router.route, location.href);
-            if (!shallowRouting || !isSameURL(targetUrl, currentUrl)) {
+            if (!shallowRouting ||
+                (!isSameURL(targetUrl, currentUrl) && disableSameURL)) {
                 startProgress();
@@ -275,2 +292,5 @@ }
 }, function (prevProps, nextProps) {
+    if ((nextProps === null || nextProps === void 0 ? void 0 : nextProps.memo) === false) {
+        return false;
+    }
     if (!(nextProps === null || nextProps === void 0 ? void 0 : nextProps.shouldCompareComplexProps)) {
@@ -284,2 +304,5 @@ return true;
         (prevProps === null || prevProps === void 0 ? void 0 : prevProps.delay) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.delay) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.disableSameURL) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.disableSameURL) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.stopDelay) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.stopDelay) &&
+        (prevProps === null || prevProps === void 0 ? void 0 : prevProps.nonce) === (nextProps === null || nextProps === void 0 ? void 0 : nextProps.nonce) &&
         JSON.stringify(prevProps === null || prevProps === void 0 ? void 0 : prevProps.options) ===
@@ -286,0 +309,0 @@ JSON.stringify(nextProps === null || nextProps === void 0 ? void 0 : nextProps.options) &&

dist/PagesProgressBar.d.ts

 import React from 'react';
 import { ProgressBarProps } from '.';
-export declare const PagesProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, startPosition, delay, stopDelay, style, nonce, }: Omit<ProgressBarProps, 'targetPreprocessor'>) => React.JSX.Element>;
+export declare const PagesProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, }: Omit<ProgressBarProps, 'targetPreprocessor'>) => React.JSX.Element>;

package.json

 {
   "name": "next-nprogress-bar",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "description": "NextJS progress bar compatible with new app directory",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -23,3 +23,3 @@ <div align="center">
     - [Second approach wrap in a use client Providers component](#second-approach-wrap-in-a-use-client-providers-component)
-- [Tips](#tips)
+- [Data attributes](#data-attributes)
   - [Disable progress bar on specific links](#disable-progress-bar-on-specific-links)
@@ -34,2 +34,3 @@ - [Props](#props)
   - [delay](#delay)
+  - [disableSameURL](#disableSameURL)
   - [stopDelay](#stopdelay)
@@ -289,3 +290,3 @@ - [nonce](#nonce)
 
-## Tips
+## Data attributes
 
@@ -304,2 +305,15 @@ ### Disable progress bar on specific links
 
+### Prevent progress
+
+You can prevent the progress bar from starting by adding the `data-prevent-nprogress={true}` attribute.
+
+```jsx
+<Link href="/dashboard">
+  <span>Dashboard</span>
+  <span onClick={(e) => e.preventDefault()} data-prevent-nprogress={true}>
+    preventDefault
+  </span>
+</Link>
+```
+
 ## Props
@@ -335,2 +349,6 @@
 
+### disableSameURL _optional_ - _boolen_
+
+Disable the progress bar when the target URL is the same as the current URL - **by default true**
+
 ### stopDelay _optional_ - _number_
@@ -344,2 +362,6 @@
 
+### memo _optional_ - _boolean_
+
+A cryptographic nonce (number used once) used to declare inline scripts for Content Security Policy - **by default true**
+
 ### style _optional_ - _string_
@@ -346,0 +368,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

71939

increased by8.72%

Lines of code

376

increased by7.12%

Number of lines in readme file

477

increased by4.84%

No dependency changes