🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

nextjs-progressbar

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nextjs-progressbar

Nprogress component for Next.js app.

0.0.16
latest
Source
npm
Version published
Weekly downloads
84K
-19.94%
Maintainers
1
Weekly downloads
 
Created
Source

Next.js 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-progressbar

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" />

Custom CSS

You can use transformCSS prop to pass custom css. Note: You must return a JSX.Element from the function.

<NextNProgress
  transformCSS={(css) => {
    // css is the default css string. You can modify it and return it or return your own css.
    return <style>{css}</style>;
  }}
/>

Other Configs

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

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

Keywords

Nprogress

FAQs

Package last updated on 16 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts