next-nprogress-bar - npm Package Compare versions

Comparing version 1.2.5 to 2.0.0

dist/index.d.ts

@@ -1,2 +0,1 @@
-import React from 'react';
 export interface NProgressOptions {
@@ -33,3 +32,4 @@ minimum?: number;
  */
-declare const ProgressBar: React.MemoExoticComponent<({ color, height, options, appDirectory, shallowRouting, delay, style, }: ProgressBarProps) => React.JSX.Element>;
-export default ProgressBar;
+export { AppProgressBar } from './appDir';
+export { useRouter } from './appRouter';
+export { PagesProgressBar } from './pagesDir';

dist/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var NProgress = require('nprogress');
+var navigation = require('next/navigation');
+var Router = require('next/router');
 
-/**
- * @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, _f = _a.delay, delay = _f === void 0 ? 0 : _f, style = _a.style;
+function isSameURL(target, current) {
+    var cleanTarget = target.protocol + '//' + target.host + target.pathname;
+    var cleanCurrent = current.protocol + '//' + current.host + current.pathname;
+    return cleanTarget === cleanCurrent;
+}
+
+var AppProgressBar = 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 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        ")));
     NProgress.configure(options || {});
+    var pathname = navigation.usePathname();
+    var searchParams = navigation.useSearchParams();
     React.useEffect(function () {
+        NProgress.done();
+    }, [pathname, searchParams]);
+    React.useEffect(function () {
         var timer;
@@ -31,63 +33,79 @@ var startProgress = function () {
         };
-        if (appDirectory) {
-            var handleAnchorClick_1 = function (event) {
-                var anchorElement = event.currentTarget;
-                // Skip anchors with target="_blank"
-                if (anchorElement.target === '_blank')
-                    return;
-                var targetUrl = new URL(anchorElement.href);
-                var currentUrl = new URL(location.href);
-                if (!shallowRouting || !isSameURL(targetUrl, currentUrl)) {
-                    startProgress();
-                }
-            };
-            var handleMutation = function () {
-                var anchorElements = document.querySelectorAll('a');
-                anchorElements.forEach(function (anchor) {
-                    return anchor.addEventListener('click', handleAnchorClick_1);
-                });
-            };
-            var mutationObserver = new MutationObserver(handleMutation);
-            mutationObserver.observe(document, { childList: true, subtree: true });
-            window.history.pushState = new Proxy(window.history.pushState, {
-                apply: function (target, thisArg, argArray) {
-                    stopProgress();
-                    return target.apply(thisArg, argArray);
-                },
+        var handleAnchorClick = function (event) {
+            var anchorElement = event.currentTarget;
+            // Skip anchors with target="_blank"
+            if (anchorElement.target === '_blank')
+                return;
+            var targetUrl = new URL(anchorElement.href);
+            var currentUrl = new URL(location.href);
+            if (!shallowRouting || !isSameURL(targetUrl, currentUrl)) {
+                startProgress();
+            }
+        };
+        var handleMutation = function () {
+            var anchorElements = document.querySelectorAll('a');
+            anchorElements.forEach(function (anchor) {
+                return anchor.addEventListener('click', handleAnchorClick);
             });
-        }
-        else {
-            import('next/router')
-                .then(function (_a) {
-                var Router = _a.default;
-                var handleRouteStart = function (url) {
-                    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 stopProgress(); };
-                Router.events.on('routeChangeStart', handleRouteStart);
-                Router.events.on('routeChangeComplete', handleRouteDone);
-                Router.events.on('routeChangeError', handleRouteDone);
-                return function () {
-                    // Make sure to remove the event handler on unmount!
-                    Router.events.off('routeChangeStart', handleRouteStart);
-                    Router.events.off('routeChangeComplete', handleRouteDone);
-                    Router.events.off('routeChangeError', handleRouteDone);
-                };
-            })
-                .catch(function (err) { return console.error('Failed to load module', err); });
-        }
+        };
+        var mutationObserver = new MutationObserver(handleMutation);
+        mutationObserver.observe(document, { childList: true, subtree: true });
+        window.history.pushState = new Proxy(window.history.pushState, {
+            apply: function (target, thisArg, argArray) {
+                stopProgress();
+                return target.apply(thisArg, argArray);
+            },
+        });
     }, []);
     return styles;
 }, 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;
+var useRouter = function () {
+    var router = navigation.useRouter();
+    var push = router.push;
+    router.push = function (href, options) {
+        NProgress.start();
+        push(href, options);
+    };
+    return router;
+};
+
+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 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        ")));
+    NProgress.configure(options || {});
+    React.useEffect(function () {
+        var timer;
+        var startProgress = function () {
+            timer = setTimeout(NProgress.start, delay);
+        };
+        var stopProgress = function () {
+            clearTimeout(timer);
+            NProgress.done();
+        };
+        var handleRouteStart = function (url) {
+            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 stopProgress(); };
+        Router.events.on('routeChangeStart', handleRouteStart);
+        Router.events.on('routeChangeComplete', handleRouteDone);
+        Router.events.on('routeChangeError', handleRouteDone);
+        return function () {
+            // Make sure to remove the event handler on unmount!
+            Router.events.off('routeChangeStart', handleRouteStart);
+            Router.events.off('routeChangeComplete', handleRouteDone);
+            Router.events.off('routeChangeError', handleRouteDone);
+        };
+    }, []);
+    return styles;
+}, function () { return true; });
+
+exports.AppProgressBar = AppProgressBar;
+exports.PagesProgressBar = PagesProgressBar;
+exports.useRouter = useRouter;
 //# sourceMappingURL=index.js.map

package.json

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

README.md

@@ -31,2 +31,5 @@ <div align="center">
   - [style](#style)
+- [App directory router](#app-directory-router)
+  - [Import](#import)
+  - [Use](#use)
 - [Issues](#issues)
@@ -54,3 +57,7 @@ - [LICENSE](#license)
 ```javascript
-import ProgressBar from 'next-nprogress-bar';
+// In app directory
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
+
+// In pages directory
+import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
 ```
@@ -69,3 +76,3 @@
 ```jsx
-import ProgressBar from 'next-nprogress-bar';
+import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
 
@@ -91,3 +98,3 @@ export default function App({ Component, pageProps }) {
 import type { AppProps } from 'next/app';
-import ProgressBar from 'next-nprogress-bar';
+import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
 
@@ -119,3 +126,3 @@ export default function App({ Component, pageProps }: AppProps) {
 
-import ProgressBar from 'next-nprogress-bar';
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
 
@@ -132,3 +139,2 @@ export default function RootLayout({ children }) {
           shallowRouting
-          appDirectory
         />
@@ -149,3 +155,3 @@ </body>
 
-import ProgressBar from 'next-nprogress-bar';
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
 
@@ -161,3 +167,2 @@ const Providers = ({ children }) => {
         shallowRouting
-        appDirectory
       />
@@ -197,3 +202,3 @@ </>
 
-import ProgressBar from 'next-nprogress-bar';
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
 
@@ -214,3 +219,2 @@ export default function RootLayout({
           shallowRouting
-          appDirectory
         />
@@ -231,3 +235,3 @@ </body>
 
-import ProgressBar from 'next-nprogress-bar';
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
 
@@ -243,3 +247,2 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
         shallowRouting
-        appDirectory
       />
@@ -291,6 +294,2 @@ </>
 
-### appDirectory _optional_ - _boolean_
-
-If your are in the new **/app** directory - **by default false**
-
 ### shallowRouting _optional_ - _boolean_
@@ -310,2 +309,20 @@
 
+## App directory router
+
+### Import
+
+```jsx
+import { useRouter } from 'next-nprogress-bar';
+```
+
+### Use
+
+Replace your 'next/navigation' routers with this one. It's the same router, but this one supports NProgress.
+
+```jsx
+const router = useRouter();
+
+router.push('/about');
+```
+
 ## Issues
@@ -312,0 +329,0 @@

No alert changes

Improved metrics

Total package byte prevSize

33675

increased by27.59%

Number of package files

9

increased by80%

Lines of code

156

increased by21.88%

Number of lines in readme file

323

increased by5.56%

No dependency changes