README

next-progress

No hassle Next.js - NProgress integration

Fully configurable & easy to use

🔌 Setup

it's so quick

✅ Install

yarn add next-nprogress

npm --save next-nprogress

✅ 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 GlobalContext from "context";
import { ThemeProvider } from "styled-components";
import Layout from "organisms/Layout";
import NextProgress from "next-progress";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={}>
      <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>
      <GlobalContext.Provider value={}>
        <GlobalStyle />
        {
          //
          // Can be placed anywhere in the return statement
          //
        }
        <NextProgress delay={300} options={{ showSpinner: false }} />
        {
          //
          //
          //
        }
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </GlobalContext.Provider>
    </ThemeProvider>
  );
}

⚙️ 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.

⚙️ options

Options for - NProgress.configure(options).

See NProgress docs

default = undefined

👠 customGlobalCss

Css Custom NProgress styles - must be provided as a GlobalStyleComponent - use createGlobalStyle from styled-components.

Warning: color param won't work as you should set the color yourself inside custom css.