@lexz451/next-nprogress
v0.3.1TypeScript
NProgress integration with Next 13
0/weekUpdated 12 months agoMITUnpacked: 37.2 KB
Published by lexz451
npm install @lexz451/next-nprogress
next-nprogress
NProgress integration with Next 13
ā¦ Developed with the software and tools below.
---
š Overview
Integrate nprogress with Next.js 13. Compatible with the new app directory structure. Inspired by Next NProgress Bar
---
š Getting Started
Install the package with npm:
``sh`
npm install @lexz451/next-nprogress
or yarn:
`sh`
yarn add @lexz451/next-nprogress
or pnpm:
`sh`
pnpm add @lexz451/next-nprogress
---
š Usage
Add the ProgressBar component to your app layout. It will automatically render the progress bar when a page is loading.
`tsx
import { ProgressBar } from '@lexz451/next-nprogress';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
height='2px'
options={{
showSpinner: false,
}}
/>
{children}
)
}
`
Use the Link component provided by next-nprogress.
tsx
import { Link } from '@lexz451/next-nprogress';export default function Navbar() {
return (
)
}
`Use the router hook provided by next-nprogress.
tsx
'use client';import { useRouter } from '@lexz451/next-nprogress';
export default function Navbar() {
const router = useRouter();
return (
)
}
`Available props for the ProgressBar component:
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| color | string | #29D | The color of the progress bar. |
| height | string | 2px | The height of the progress bar. |
| options | object | {} | The options passed to nprogress. |
passing options to the progress bar:
tsx
height='2px'
options={{
trickleSpeed: 50,
showSpinner: false,
}}
/>
`---
š¤ Contributing
Contributions are always welcome! Please follow these steps:
1. Fork the project repository. This creates a copy of the project on your account that you can modify without affecting the original project.
2. Clone the forked repository to your local machine using a Git client like Git or GitHub Desktop.
3. Create a new branch with a descriptive name (e.g.,
or bugfix-issue-123).
`sh
git checkout -b new-feature-branch
`
4. Make changes to the project's codebase.
5. Commit your changes to your local branch with a clear commit message that explains the changes you've made.
sh
git commit -m 'Implemented new feature.'
`
6. Push your changes to your forked repository on GitHub using the following command
sh
git push origin new-feature-branch
`
7. Create a new pull request to the original project repository. In the pull request, describe the changes you've made and why they're necessary.
The project maintainers will review your changes and provide feedback or merge them into the main branch.---
š License
This project is licensed under the
---