Nprogress component for Next.js app.
npm install webcoda-nextjs-progressbarFork of Next.js progressbar, just to publish v0.0.15 (at the time of publishing)
Demo: https://demo-nextjs-progressbar.vercel.app
``bash`
npm i nextjs-progressbar
After installing the package, import NextNProgress in your pages/_app.js file:
`js`
import NextNProgress from 'nextjs-progressbar';
And for rendering add to your return() in MyApp():
`js
import NextNProgress from 'nextjs-progressbar';
export default function MyApp({ Component, pageProps }) {
return (
<>
>
);
}
`
If no props are passed to , below is the default configuration applied.
`jsx`
- 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