next13-nprogress v0.0.6

Next.js Progressbar

Nprogress component for Next.js 13 NProgress.

How to install?

npm i next13-nprogress

How to use?

After installing the package, import Next13NProgress in your pages/_app.js file:

import Next13NProgress from 'next13-nprogress';

And for rendering add <Next13NProgress /> to your return() in MyApp():

import Next13NProgress from 'next13-nprogress';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Next13NProgress />
      <Component {...pageProps} />;
    </>
  );
}

Default Config

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

<Next13NProgress 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%.
• 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

You can use other configurations which NProgress provides by adding a JSON in options props.

<Next13NProgress options={{ easing: 'ease', speed: 500 }} />