NProgress component for Next.js app.
npm install @approximant/next-progress> Note
> This is a fork of nextjs-progressbar by apal21. It adds an optional debounce to the progress bar to prevent it from flickering when the page loads quickly.
A simple Next.js progressbar component using NProgress.
After installing the package, import NextProgress in your pages/_app.tsx file and add to the render function in App:
``js
import NextProgress from '@approximant/next-progress';
export default function App({ Component, pageProps }) {
return (
<>
>
);
}
`
If no props are passed to , the default configuration is applied.
`jsx`
// Default config
color="#29D"
startPosition={0.3}
stopDelayMs={200}
height={3}
showOnShallow={true}
/>
- debounce: Debounce time in ms. The progress bar will not be shown if the page loads in less than this time.
- 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.
#### Adding nonce
We use internal css in this package. If you are using csp, you can add nonce to the ;
}}
/>
`
#### Other config
You can use other configurations which NProgress provides by adding a JSON in options props.
`jsx``