Need help with next-nprogress?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

sergiodxa
144 Stars 14 Forks MIT License 85 Commits 0 Opened issues

Description

Next.js HOC to integrate NProgress inside your app

Services available

!
?

Need anything else?

Contributors list

# 4,114
nextjs
vercel
high-or...
ecmascr...
13 commits
# 220,438
PHP
Redux
Shell
Sass
2 commits
# 36,009
Webpack
TypeScr...
reactjs
worker-...
1 commit
# 152,538
Markdow...
CSS
Jekyll
jekyll-...
1 commit

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:


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:


Configure the HOC:

const msDelay = 200;
const options = { trickleSpeed: 50 };
export default withNProgress(msDelay, options)(MyApp);

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.