next-progress
v2.3.1
Published
NextJS NProgress implementation
Downloads
21,516
Maintainers
beeingerReadme
next-progress
No hassle Next.js - NProgress integration
Fully configurable & easy to use
🚀 Demo
🔌 Setup
it's so quick
✅ Install
yarn add next-progressor
npm install --save next-progress✅ Import
Important❗️ It has to be done in your custom App - pages/_app[.js / .jsx / .ts / .tsx]
import NextProgress from "next-progress";✅ Use
Anywhere in your custom App's return statement
<NextProgress />🌟 Example pages\_app
Tip: This example is in typescript, if you use javascript then just remove the types.
import type { AppProps } from "next/app";
import Head from "next/head";
import NextProgress from "next-progress";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Lorem Ipsum..." />
<title>Example</title>
</Head>
{
//
// Can be placed anywhere in the return statement
//
}
<NextProgress delay={300} options={{ showSpinner: false }} />
{
//
//
//
}
<Layout>
<Component {...pageProps} />
</Layout>
</>
);
}⚙️ Docs - Options
📐 height
Height of the progress bar.
default = "2px"
🌈 color
Color of the progress bar.
default = "#29D"
🐢 delay
Delay of the animation - when page loads faster than the delay time progress bar won't be displayed.
default = 0
♻️ disableSameRoute
If true, progress bar won't be displayed when user travels the same route they're currently on.
default = false
⚙️ options
Options for - NProgress.configure(options).
See NProgress docs
default = undefined
👠 customGlobalCss
Css Custom NProgress styles - must be provided as a string that will go inside the <style jsx> tag.
Warning: color param won't work as you should set the color yourself inside custom css.
default = undefined