Skip to content

Latest commit

 

History

History
166 lines (132 loc) · 4.22 KB

README.md

File metadata and controls

166 lines (132 loc) · 4.22 KB
Raw

next-nprogress

NProgress integration with Next 13

◦ Developed with the software and tools below.

Next.js React TypeScript

GitHub license git-last-commit GitHub commit activity GitHub top language

📍 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:

npm install @lexz451/next-nprogress

or yarn:

yarn add @lexz451/next-nprogress

or pnpm:

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.

import { ProgressBar } from '@lexz451/next-nprogress';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Suspense fallback={true}>
          <ProgressBar
            color='#333'
            height='2px'
            options={{
              showSpinner: false,
            }}
          />
        </Suspense>
      </head>
      <body>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  )
}

Use the Link component provided by next-nprogress.

import { Link } from '@lexz451/next-nprogress';

export default function Navbar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
  )
}

Use the router hook provided by next-nprogress.

'use client';

import { useRouter } from '@lexz451/next-nprogress';

export default function Navbar() {
  const router = useRouter();

  return (
    <nav>
      <button onClick={() => router.push('/')}>Home</button>
      <button onClick={() => router.push('/about')}>About</button>
    </nav>
  )
}

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:

<ProgressBar
  color='#333'
  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., new-feature-branch or bugfix-issue-123).
git checkout -b new-feature-branch
  1. Make changes to the project's codebase.
  2. Commit your changes to your local branch with a clear commit message that explains the changes you've made.
git commit -m 'Implemented new feature.'
  1. Push your changes to your forked repository on GitHub using the following command
git push origin new-feature-branch
  1. 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 ℹ️ MIT License.