From ee479dfee5f537512f84e30443d7822c8c9bdf7b Mon Sep 17 00:00:00 2001 From: Shri Ganesh Jha Date: Thu, 16 Mar 2023 22:55:41 +0545 Subject: [PATCH] fix: the Loader gets triggered on navigation to link in another tab (#6) and refactored the code a bit. --- CHANGELOG.md | 6 ++++ README.md | 4 ++- package.json | 2 +- src/index.tsx | 95 ++++++++++++++++++++++++++------------------------- 4 files changed, 58 insertions(+), 49 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 90a6bfb..11abb25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,3 +40,9 @@ ### Updated - Refactor the code in `useEffect` hook, removed the `next/script` + +## v1.2.2 + +### Fixed + +- Fix the Loader gets triggered on navigation to link in another tab diff --git a/README.md b/README.md index 7388ec9..52aacc7 100644 --- a/README.md +++ b/README.md @@ -86,4 +86,6 @@ If no props are passed to ``, below is the default configuratio - `crawl`: auto increamenting behaviour for the TopLoader. - `showSpinner`: to show spinner or not. -After passing the props reload the your next.js page once in the browser, to see changes for `` ( This is because NextTopLoader uses built-in history api in browser for indicating progress. ) +[![Sponsor me on GitHub](https://img.shields.io/badge/Sponsor%20me%20on-GitHub-brightgreen)](https://github.com/sponsors/TheSGJ) + +[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/thesgj) diff --git a/package.json b/package.json index 5097518..5d5642d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nextjs-toploader", - "version": "1.2.1", + "version": "1.2.2", "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", diff --git a/src/index.tsx b/src/index.tsx index 19d0be5..7403f52 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -27,7 +27,7 @@ export interface NextTopLoaderProps { */ crawlSpeed?: number; /** - * The height for the TopLoader. + * The height for the TopLoader in pixels (px). * @default 3 */ height?: number; @@ -53,47 +53,66 @@ export interface NextTopLoaderProps { speed?: number; } -const NextTopLoader = (props: NextTopLoaderProps) => { - const color = '#29d'; - const height = 3; +const NextTopLoader = ({ + color, + height, + showSpinner, + crawl, + crawlSpeed, + initialPosition, + easing, + speed, +}: NextTopLoaderProps) => { + const defaultColor = '#29d'; + const defaultHeight = 3; const styles = ( ); React.useEffect(() => { - if (props.showSpinner !== undefined) { - NProgress.configure({ showSpinner: props.showSpinner }); - } - if (props.crawl !== undefined) { - NProgress.configure({ trickle: props.crawl }); - } - if (props.crawlSpeed !== undefined) { - NProgress.configure({ trickleSpeed: props.crawlSpeed }); - } - if (props.initialPosition !== undefined) { - NProgress.configure({ minimum: props.initialPosition }); - } - if (props.easing !== undefined) { - NProgress.configure({ easing: props.easing }); - } - if (props.speed !== undefined) { - NProgress.configure({ speed: props.speed }); + NProgress.configure({ + showSpinner: showSpinner ?? true, + trickle: crawl ?? true, + trickleSpeed: crawlSpeed ?? 200, + minimum: initialPosition ?? 0.08, + easing: easing ?? 'ease', + speed: speed ?? 200, + }); + + function isAnchorOfCurrentUrl(currentUrl: string, newUrl: string) { + const currentUrlObj = new URL(currentUrl); + const newUrlObj = new URL(newUrl); + // Compare hostname, pathname, and search parameters + if ( + currentUrlObj.hostname === newUrlObj.hostname && + currentUrlObj.pathname === newUrlObj.pathname && + currentUrlObj.search === newUrlObj.search + ) { + // Check if the new URL is just an anchor of the current URL page + const currentHash = currentUrlObj.hash; + const newHash = newUrlObj.hash; + return ( + currentHash !== newHash && currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '') + ); + } + return false; } + // eslint-disable-next-line no-var var npgclass = document.querySelectorAll('html'); let navLinks = document.querySelectorAll('a'); @@ -101,26 +120,8 @@ const NextTopLoader = (props: NextTopLoaderProps) => { navLink.addEventListener('click', (event: MouseEvent) => { let currentUrl = window.location.href; let newUrl = (event.currentTarget as HTMLAnchorElement).href; - let isExternalLink = (event.currentTarget as HTMLAnchorElement).target === "_blank"; - function isAnchorOfCurrentUrl(currentUrl: string, newUrl: string) { - const currentUrlObj = new URL(currentUrl); - const newUrlObj = new URL(newUrl); - // Compare hostname, pathname, and search parameters - if ( - currentUrlObj.hostname === newUrlObj.hostname && - currentUrlObj.pathname === newUrlObj.pathname && - currentUrlObj.search === newUrlObj.search - ) { - // Check if the new URL is just an anchor of the current URL page - const currentHash = currentUrlObj.hash; - const newHash = newUrlObj.hash; - return ( - currentHash !== newHash && - currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '') - ); - } - return false; - } + const isExternalLink = (event.currentTarget as HTMLAnchorElement).target === '_blank'; + const isAnchor = isAnchorOfCurrentUrl(currentUrl, newUrl); if (newUrl === currentUrl || isAnchor || isExternalLink) { NProgress.start();