next13-progressbar

v1.2.1

Published

2 months ago

A ProgressBar for next.js >=13 with app directory

Downloads

24,350

0High
0Medium
0Low

ndungutsecharles19

Nprogress Next Next.js Progressbar

Next.js 13 Progressbar

A simple Next.js progressbar component using NProgress with support of next.js 13 and later app dir.

Demo: https://next13-progressbar.vercel.app/

How to install?

npm i next13-progressbar

How to use?

⚠️ Note : This docs are for versions >=1.0.0 only. For the older versions check tags versions tree's Readme of the older version.

After installing the package, create providers.tsx file in app directory to handle contexts and mark it use client. see contexts in app dir and import `Next13ProgressBar;

'use client';
import React from 'react';
import { Next13ProgressBar } from 'next13-progressbar';

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <Next13ProgressBar height="4px" color="#0A2FFF" options={{ showSpinner: true }} showOnShallow />
    </>
  );
};

export default Providers;

Wrap your providers in layout.tsx/js

import Providers from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

By default all a tags are handled by next/link so you don't need to do anything.

import Link from 'next/link';
import { useRouter } from 'next13-progressbar';

const NavBar = () => {
  const router = useRouter();
  return (
    <div className="navbar">
      <Link href={'/'}>Home</Link>
      <Link href={'/about'}>About</Link>
      <Link href={'/contact'}>Contact</Link>
      <button onClick={() => router.push('/button-link')}>ButtonLink</button>
    </div>
  );
};

Default Config

If no props are passed to <Next13ProgressBar />, below is the default configuration applied.

<Next13ProgressBar color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />

color: to change the default color of progressbar. You can also use rgb(,,) or rgba(,,,).
startPosition: to set the default starting position : 0.3 = 30%.
delay: time for delay to start progressbar in ms.
stopDelayMs: time for delay to stop progressbar in ms.
height: height of progressbar in px.
showOnShallow: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing in Next.js docs.

Advanced Config

Adding nonce

We use internal css in this package. If you are using csp, you can add nonce to the <style> tag by providing nonce prop to <NProvider /> component.

<Next13ProgressBar nonce="my-nonce" />

Custom CSS

You can pass custom css to the progressbar by using style prop.

<Next13ProgressBar
  style={`
    #nprogress {
      pointer-events: none;
    }
  `}
/>

Older Versions

Check Branches with v prefix for older docs of the package. If not found check tags versions tree's Readme of the older version.

Contributing

Any Contribution of any kind are appreciated. You can start by forking this repository and make your changes then submit a pull request

Author

Ndungutse Charles

Support

Your support matters. It pushes me to do more Open Source contributions and give back to the community.