Skip to content
Next.js HOC to integrate NProgress inside your app
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc Upgade Babel to v7 Oct 22, 2018
.eslintrc Add Linter and Prettier Oct 22, 2018
.gitignore Upload code Jun 22, 2018
.npmignore Upload code Jun 22, 2018
LICENSE Initial commit Jun 21, 2018
README.md Update README.md Jan 26, 2019
component.js Plain component implementation (#16) Oct 11, 2018
index.js Plain component implementation (#16) Oct 11, 2018
package.json
renovate.json Add renovate.json (#1) Jul 11, 2018
styles.js Upload code Jun 22, 2018
yarn.lock

README.md

next-nprogress

Next.js HOC to integrate NProgress inside your app.

This is configured to run only after a delay of (default) 300ms. This means if the page change takes too long it will render the progress bar, but if it's fast enough it will avoid rendering it.

Installation

yarn add next-nprogress

Usage

Component

Import it inside your pages/_app.js;

import NProgress from "next-nprogress/component";

Render the component in your custom App container:

<NProgress />

That's it. Now NProgress will work automatically and render the correct styles using styled-jsx.

Higher order component

Import it inside your pages/_app.js;

import withNProgress from "next-nprogress";

Wrap your custom App container with it

const msDelay = 1000; // default is 300
export default withNProgress(msDelay)(MyApp);

Internally it will use the NProgress component and render it alongside your application.

Advanced Config

You can configure further configure NProgress using its configuration options.

Configure the component:

<NProgress
  color="#29d"
  options={{ trickleSpeed: 50 }}
  showAfterMs={300}
  spinner
/>

Configure the HOC:

const msDelay = 200;
const options = { trickleSpeed: 50 };
export default withNProgress(msDelay, options)(MyApp);
You can’t perform that action at this time.