Nitrate Processed Mincemeat

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

    0.0.16 • Public • Published

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

    Install

    npm i nextjs-progressbar

    DownloadsWeekly Downloads

    76,697

    Version

    0.0.16

    License

    MIT

    Unpacked Size

    16.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • apal21