Skip to content

Commit

Permalink
[feat]: allowing default next link component
Browse files Browse the repository at this point in the history
  • Loading branch information
ndungtse committed Jun 29, 2023
1 parent 25bdc83 commit 5cd20f8
Show file tree
Hide file tree
Showing 12 changed files with 92 additions and 36 deletions.
34 changes: 27 additions & 7 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -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",
{
Expand All @@ -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"
}
}
}
7 changes: 7 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"recommendations": [
"streetsidesoftware.code-spell-checker",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}
17 changes: 13 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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

Expand Down
5 changes: 1 addition & 4 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
2 changes: 1 addition & 1 deletion example/src/components/NavBar.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';
import { Link } from 'next13-progressbar';
import React from 'react';
import Link from 'next/link';

const NavBar = () => {
return (
Expand Down
13 changes: 4 additions & 9 deletions example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/CLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand Down
19 changes: 15 additions & 4 deletions src/NProvider.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand All @@ -33,4 +44,4 @@ export const NProvider = (props: NProviderProps) => {
);
};

export const useApp = () => React.useContext(NPContext);
export const useNProgress = () => React.useContext(NPContext);
4 changes: 2 additions & 2 deletions src/NavigationEvents.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
3 changes: 2 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"lib": [
"es2021"
"es2021",
"DOM"
],
"skipLibCheck": true,
"noEmit": true,
Expand Down
17 changes: 16 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==

0 comments on commit 5cd20f8

Please sign in to comment.