https://github.com/sergiodxa/next-nprogress
Next.js HOC to integrate NProgress inside your app
https://github.com/sergiodxa/next-nprogress
higher-order-component hoc nextjs nprogress progress-bar react reactjs
Last synced: 8 months ago
JSON representation
Next.js HOC to integrate NProgress inside your app
- Host: GitHub
- URL: https://github.com/sergiodxa/next-nprogress
- Owner: sergiodxa
- License: mit
- Archived: true
- Created: 2018-06-21T22:38:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-10T14:59:36.000Z (over 6 years ago)
- Last Synced: 2025-04-21T01:49:32.982Z (8 months ago)
- Topics: higher-order-component, hoc, nextjs, nprogress, progress-bar, react, reactjs
- Language: JavaScript
- Size: 240 KB
- Stars: 148
- Watchers: 3
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
yarn add next-nprogress
```
## Usage
### Component
Import it inside your `pages/_app.js`;
```js
import NProgress from "next-nprogress/component";
```
Render the component in your [custom App container](https://nextjs.org/docs#custom-%3Capp%3E):
```jsx
```
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`;
```js
import withNProgress from "next-nprogress";
```
Wrap your [custom App container](https://nextjs.org/docs#custom-%3Capp%3E) with it
```js
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](https://github.com/rstacruz/nprogress#configuration).
Configure the component:
```jsx
```
Configure the HOC:
```js
const msDelay = 200;
const options = { trickleSpeed: 50 };
export default withNProgress(msDelay, options)(MyApp);
```