nextjs-progressbar2
TypeScript icon, indicating that this package has built-in type declarations

0.0.16 • Public • Published

Next.js Progressbar 2

This is fork of nextjs-progressbar.

A simple Next.js progressbar component using NProgress.

I've created this Blog to help you create your own progressbar

Demo: https://demo-nextjs-progressbar.vercel.app

How to install?

npm i nextjs-progressbar2

How to use?

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

import NextNProgress from "nextjs-progressbar";

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

import NextNProgress from "nextjs-progressbar";

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

Default Config

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

<NextNProgress
  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

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 <NextNProgress /> component.

<NextNProgress nonce="my-nonce" />

Other Configs

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

<NextNProgress options={{ easing: "ease", speed: 500 }} />

Package Sidebar

Install

npm i nextjs-progressbar2

Weekly Downloads

1

Version

0.0.16

License

MIT

Unpacked Size

16.9 kB

Total Files

6

Last publish

Collaborators

  • raitucarp