[feat]: allowing default next link component

Author: ndungtse

.eslintrc

@@ -1,14 +1,25 @@
 {
-  "plugins": ["@typescript-eslint"],
+  "plugins": [
+    "@typescript-eslint"
+  ],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended"
   ],
   "rules": {
-    "quotes": ["error", "single"],
-    "semi": ["error", "always"],
-    "eol-last": ["error", "always"],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    "eol-last": [
+      "error",
+      "always"
+    ],
     "comma-dangle": [
       "error",
       {
@@ -19,13 +30,22 @@
         "functions": "never"
       }
     ],
-    "arrow-parens": ["error", "always"],
-    "no-trailing-spaces": ["error", { "skipBlankLines": true }],
+    "arrow-parens": [
+      "error",
+      "always"
+    ],
+    "no-trailing-spaces": [
+      "error",
+      {
+        "skipBlankLines": true
+      }
+    ],
     "prefer-const": "warn",
     "accessor-pairs": "off",
     "no-async-promise-executor": "off",
     "no-unused-vars": "off",
     "node/no-missing-require": "off",
+    "@typescript-eslint/no-empty-function": "off",
     "no-console": "warn"
   }
-}
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "streetsidesoftware.code-spell-checker",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
+    ]
+}

README.md

@@ -44,11 +44,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-Use `Link` component form `next13-progressbar` in your entire app instead of native `next/link` to navigate with progressbar
+By default all `a` tags are handled by `next/link` so you don't need to do anything.
 
 ```jsx
-'use client';
-import { Link } from 'next13-progressbar';
+import Link from 'next/link';
 
 export default function NavBar() {
   return (
@@ -61,8 +60,18 @@ export default function NavBar() {
 }
 ```
 
+But if you want to use `Link` component from `next13-progressbar` you can do it by importing it from `next13-progressbar` and use it as you would use `next/link` component.
+
+```jsx
+'use client';
+import { Link } from 'next13-progressbar';
+
+// use it as you would use next/link
+```
+
 And you are done. You can now customize you progress bar as you need!
-⚠️ Note: You must use `Link` component inside client components only.
+
+⚠️ Note: You must use `next13-progressbar` `Link` component inside client components only.
 
 ### Default Config
 

example/package.json

@@ -15,12 +15,9 @@
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.7",
     "next": "13.4.7",
-    "next13-progressbar": "^0.1.0",
+    "next13-progressbar": "^0.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.5"
-  },
-  "devDependencies": {
-    "husky": "^8.0.3"
   }
 }

example/src/components/NavBar.tsx

@@ -1,6 +1,6 @@
 'use client';
-import { Link } from 'next13-progressbar';
 import React from 'react';
+import Link from 'next/link';
 
 const NavBar = () => {
   return (

example/yarn.lock

@@ -1158,11 +1158,6 @@ human-signals@^4.3.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
   integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
 
-husky@^8.0.3:
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
-  integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
-
 ignore@^5.2.0:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
@@ -1511,10 +1506,10 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-next13-progressbar@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/next13-progressbar/-/next13-progressbar-0.1.0.tgz#81310c50104aebefd0e379fcd53fa538c797fa65"
-  integrity sha512-BK7E3VM4JvDy0KSKT4sgcss+LIN8UmfW2CzuN2Q3n/mE5K/f3Jv5BKLDuY1a+3HCjhHrEfhL1izgFghzlk86aw==
+next13-progressbar@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/next13-progressbar/-/next13-progressbar-0.1.2.tgz#4b7c846908c548dcb6948bb33120d81ef65c589c"
+  integrity sha512-6r3J/GFeTcVLkkBd615sutRUR1oLP341VLbXv+54S+7qzoB5q66pBMNq2VI5cT8hXjSKvVvHeSadUCpomFG4pw==
   dependencies:
     "@types/nprogress" "^0.2.0"
     nprogress "^0.2.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next13-progressbar",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A ProgressBar for next.js 13 with app directory ",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,6 +25,7 @@
     "@types/react": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "eslint": "^8.43.0",
+    "husky": "^8.0.3",
     "next": "^13.4.7",
     "prettier": "^2.8.8",
     "react": "^18.2.0",

src/CLink.tsx

@@ -2,7 +2,7 @@
 import Link, { LinkProps } from 'next/link';
 import { usePathname } from 'next/navigation';
 import React from 'react';
-import { useApp } from './NProvider';
+import { useNProgress } from './NProvider';
 
 export interface PLinkProps extends LinkProps {
   children: React.ReactNode;
@@ -14,7 +14,7 @@ export interface PLinkProps extends LinkProps {
  */
 export const CLink = (props: PLinkProps) => {
   const pathname = usePathname();
-  const { setShowProgressBar } = useApp();
+  const { setShowProgressBar } = useNProgress();
 
   const handleShowProgressBar = () => {
     if (pathname !== props.href) {

src/NProvider.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ProgressBar, { Next13ProgressProps } from './ProgressBar';
 import { NavigationEvents } from './NavigationEvents';
+import { usePathname } from 'next/navigation';
 // import { usePathname } from 'next/navigation';
 
 export interface NProviderProps extends Next13ProgressProps {
@@ -14,13 +15,23 @@ interface NProviderState {
 
 const NPContext = React.createContext<NProviderState>({
   showProgressBar: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   setShowProgressBar: () => {},
 });
 
 export const NProvider = (props: NProviderProps) => {
   const [showProgressBar, setShowProgressBar] = React.useState(false);
-  // const pathname = usePathname();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const anchors = document.querySelectorAll('a');
+    anchors.forEach((anchor) => {
+      anchor.addEventListener('click', () => {
+        if (pathname !== anchor.href) {
+          setShowProgressBar(true);
+        }
+      });
+    });
+  }, []);
 
   const progressProps = { ...props };
   delete progressProps.children;
@@ -33,4 +44,4 @@ export const NProvider = (props: NProviderProps) => {
   );
 };
 
-export const useApp = () => React.useContext(NPContext);
+export const useNProgress = () => React.useContext(NPContext);

src/NavigationEvents.tsx

@@ -1,11 +1,11 @@
 'use client';
 import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
-import { useApp } from './NProvider';
+import { useNProgress } from './NProvider';
 
 export function NavigationEvents() {
   const pathname = usePathname();
-  const { setShowProgressBar } = useApp();
+  const { setShowProgressBar } = useNProgress();
 
   useEffect(() => {
     setShowProgressBar(false);