next-nprogress-bar - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/index.d.ts

@@ -9,11 +9,15 @@ import React from 'react';
     shallowRouting?: boolean;
+    delay?: number;
+    style?: string;
 }
 /**
- * @param color Color of the progress bar.
- * @param height Height of the progress bar.
- * @param options NProgress options.
- * @param appDirectory If your are in the app directory - false by default
- * @param shallowRouting If the progress bar is not displayed when you use shallow routing - false by default
+ * @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 appDirectory If your are in the app directory - @default false
+ * @param shallowRouting If the progress bar is not displayed when you use shallow routing - @default false
+ * @param delay When the page loads faster than the progress bar, it does not display - @default 0
+ * @param style Custom css - @default undefined
  */
-declare const ProgressBar: React.MemoExoticComponent<({ color, height, options, appDirectory, shallowRouting, }: ProgressBarProps) => React.JSX.Element>;
+declare const ProgressBar: React.MemoExoticComponent<({ color, height, options, appDirectory, shallowRouting, delay, style, }: ProgressBarProps) => React.JSX.Element>;
 export default ProgressBar;

dist/index.js

@@ -9,20 +9,31 @@ 'use strict';
 /**
- * @param color Color of the progress bar.
- * @param height Height of the progress bar.
- * @param options NProgress options.
- * @param appDirectory If your are in the app directory - false by default
- * @param shallowRouting If the progress bar is not displayed when you use shallow routing - false by default
+ * @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 appDirectory If your are in the app directory - @default false
+ * @param shallowRouting If the progress bar is not displayed when you use shallow routing - @default false
+ * @param delay When the page loads faster than the progress bar, it does not display - @default 0
+ * @param style Custom css - @default undefined
  */
 var ProgressBar = 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.appDirectory, appDirectory = _d === void 0 ? false : _d, _e = _a.shallowRouting, shallowRouting = _e === void 0 ? false : _e;
-    var styles = (React.createElement("style", null, "\n      #nprogress {\n        pointer-events: none;\n      }\n      #nprogress .bar {\n        background: ".concat(color, ";\n        position: fixed;\n        z-index: 99999;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: ").concat(height, ";\n      }\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;\n        transform: rotate(3deg) translate(0px, -4px);\n      }\n    ")));
+    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.appDirectory, appDirectory = _d === void 0 ? false : _d, _e = _a.shallowRouting, shallowRouting = _e === void 0 ? false : _e, _f = _a.delay, delay = _f === void 0 ? 0 : _f, style = _a.style;
+    var styles = (React.createElement("style", null, style ||
+        "\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        ")));
     React.useEffect(function () {
         options && NProgress.configure(options);
+        var timer;
+        var startProgress = function () {
+            timer = setTimeout(NProgress.start, delay);
+        };
+        var stopProgress = function () {
+            clearTimeout(timer);
+            NProgress.done();
+        };
         if (appDirectory) {
             NProgress.configure({ showSpinner: false });
             var handleAnchorClick_1 = function (event) {
-                var targetUrl = event.currentTarget.href;
-                var currentUrl = location.href;
-                if (!shallowRouting || targetUrl !== currentUrl) {
-                    NProgress.start();
+                var targetUrl = new URL(event.currentTarget.href);
+                var currentUrl = new URL(location.href);
+                if (!shallowRouting || !isSameURL(targetUrl, currentUrl)) {
+                    startProgress();
                 }
@@ -40,3 +51,3 @@ };
                 apply: function (target, thisArg, argArray) {
-                    NProgress.done();
+                    stopProgress();
                     return target.apply(thisArg, argArray);
@@ -51,7 +62,9 @@ },
                 var handleRouteStart = function (url) {
-                    if (!shallowRouting || url !== Router.route) {
-                        NProgress.start();
+                    var targetUrl = new URL(url, location.href);
+                    var currentUrl = new URL(Router.route, location.href);
+                    if (!shallowRouting || !isSameURL(targetUrl, currentUrl)) {
+                        startProgress();
                     }
                 };
-                var handleRouteDone = function () { return NProgress.done(); };
+                var handleRouteDone = function () { return stopProgress(); };
                 Router.events.on('routeChangeStart', handleRouteStart);
@@ -72,4 +85,9 @@ Router.events.on('routeChangeComplete', handleRouteDone);
 }, function () { return true; });
+function isSameURL(target, current) {
+    var cleanTarget = target.protocol + '//' + target.host + target.pathname;
+    var cleanCurrent = current.protocol + '//' + current.host + current.pathname;
+    return cleanTarget === cleanCurrent;
+}
 
 exports.default = ProgressBar;
 //# sourceMappingURL=index.js.map

package.json

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

README.md

@@ -137,2 +137,4 @@ <div align="center">
 
+See [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials#rendering-third-party-context-providers-in-server-components)
+
 ```jsx
@@ -214,2 +216,4 @@ // Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
 
+See [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials#rendering-third-party-context-providers-in-server-components)
+
 ```tsx
@@ -216,0 +220,0 @@ // Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...

No alert changes

Improved metrics

Total package byte prevSize

25633

increased by35.62%

Lines of code

113

increased by31.4%

Number of lines in readme file

306

increased by1.32%

No dependency changes