@sklinet/nextjs-progressbar
v0.0.17
Published
Nprogress component for Next.js app.
Downloads
4
Readme
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 usergb(,,)
orrgba(,,,)
.startPosition
: to set the default starting position :0.3 = 30%
.stopDelayMs
: time for delay to stop progressbar inms
.height
: height of progressbar inpx
.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 }} />