From 5cd20f82e53badd327c14c130b98f1be5f115803 Mon Sep 17 00:00:00 2001 From: ndungutsecharles103 Date: Thu, 29 Jun 2023 16:04:30 +0200 Subject: [PATCH] [feat]: allowing default next link component --- .eslintrc | 34 ++++++++++++++++++++++++------- .vscode/extensions.json | 7 +++++++ README.md | 17 ++++++++++++---- example/package.json | 5 +---- example/src/components/NavBar.tsx | 2 +- example/yarn.lock | 13 ++++-------- package.json | 3 ++- src/CLink.tsx | 4 ++-- src/NProvider.tsx | 19 +++++++++++++---- src/NavigationEvents.tsx | 4 ++-- tsconfig.json | 3 ++- yarn.lock | 17 +++++++++++++++- 12 files changed, 92 insertions(+), 36 deletions(-) create mode 100644 .vscode/extensions.json diff --git a/.eslintrc b/.eslintrc index b937e77..5f2390b 100644 --- a/.eslintrc +++ b/.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" } -} +} \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..a6dc066 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,7 @@ +{ + "recommendations": [ + "streetsidesoftware.code-spell-checker", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 94d6400..f77a2c4 100644 --- a/README.md +++ b/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 diff --git a/example/package.json b/example/package.json index f884081..3934f15 100644 --- a/example/package.json +++ b/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" } } diff --git a/example/src/components/NavBar.tsx b/example/src/components/NavBar.tsx index 4ffe57e..8af3abd 100644 --- a/example/src/components/NavBar.tsx +++ b/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 ( diff --git a/example/yarn.lock b/example/yarn.lock index 8ba6a30..b12d6b8 100644 --- a/example/yarn.lock +++ b/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" diff --git a/package.json b/package.json index 939c7c7..2ca91cc 100644 --- a/package.json +++ b/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", diff --git a/src/CLink.tsx b/src/CLink.tsx index e9dc4f2..e1b7082 100644 --- a/src/CLink.tsx +++ b/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) { diff --git a/src/NProvider.tsx b/src/NProvider.tsx index d8ef029..44c1cbd 100644 --- a/src/NProvider.tsx +++ b/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({ 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); diff --git a/src/NavigationEvents.tsx b/src/NavigationEvents.tsx index 883dcac..f52e0d3 100644 --- a/src/NavigationEvents.tsx +++ b/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); diff --git a/tsconfig.json b/tsconfig.json index fbc63be..f045ef1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,8 @@ "noFallthroughCasesInSwitch": true, "moduleResolution": "node", "lib": [ - "es2021" + "es2021", + "DOM" ], "skipLibCheck": true, "noEmit": true, diff --git a/yarn.lock b/yarn.lock index a3d7c73..bbaa322 100644 --- a/yarn.lock +++ b/yarn.lock @@ -338,6 +338,16 @@ semver "^7.3.7" tsutils "^3.21.0" +"@typescript-eslint/parser@^5.60.1": + version "5.60.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.60.1.tgz#0f2f58209c0862a73e3d5a56099abfdfa21d0fd3" + integrity sha512-pHWlc3alg2oSMGwsU/Is8hbm3XFbcrb6P5wIxcQW9NsYBfnrubl/GhVVD/Jm/t8HXhA2WncoIRfBtnCgRGV96Q== + dependencies: + "@typescript-eslint/scope-manager" "5.60.1" + "@typescript-eslint/types" "5.60.1" + "@typescript-eslint/typescript-estree" "5.60.1" + debug "^4.3.4" + "@typescript-eslint/scope-manager@5.60.1": version "5.60.1" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.60.1.tgz#35abdb47f500c68c08f2f2b4f22c7c79472854bb" @@ -917,6 +927,11 @@ human-signals@^2.1.0: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0" integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw== +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" @@ -1602,4 +1617,4 @@ yocto-queue@^0.1.0: zod@3.21.4: version "3.21.4" resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db" - integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw== \ No newline at end of file + integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==