├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── component.js ├── index.js ├── package.json ├── renovate.json ├── src ├── component.js └── hoc.js ├── styles.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react", 5 | "minify" 6 | ], 7 | "plugins": [ 8 | "styled-jsx/babel", 9 | "@babel/plugin-proposal-class-properties" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:unicorn/recommended", 4 | "plugin:react/recommended", 5 | "prettier", 6 | "prettier/react", 7 | "prettier/unicorn" 8 | ], 9 | "plugins": ["prettier", "react", "unicorn"], 10 | "env": { 11 | "es6": true, 12 | "node": true 13 | }, 14 | "rules": { 15 | "prettier/prettier": "error" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | dist -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | .babelrc 3 | !dist 4 | yarn.lock -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Sergio Xalambrí 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # next-nprogress 2 | 3 | Next.js HOC to integrate NProgress inside your app. 4 | 5 | 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. 6 | 7 | 8 | 9 | 10 | 11 | ## Installation 12 | 13 | ```bash 14 | yarn add next-nprogress 15 | ``` 16 | 17 | ## Usage 18 | 19 | ### Component 20 | 21 | Import it inside your `pages/_app.js`; 22 | 23 | ```js 24 | import NProgress from "next-nprogress/component"; 25 | ``` 26 | 27 | Render the component in your [custom App container](https://nextjs.org/docs#custom-%3Capp%3E): 28 | 29 | ```jsx 30 | 31 | ``` 32 | 33 | That's it. Now NProgress will work automatically and render the correct styles using styled-jsx. 34 | 35 | ### Higher order component 36 | 37 | Import it inside your `pages/_app.js`; 38 | 39 | ```js 40 | import withNProgress from "next-nprogress"; 41 | ``` 42 | 43 | Wrap your [custom App container](https://nextjs.org/docs#custom-%3Capp%3E) with it 44 | 45 | ```js 46 | const msDelay = 1000; // default is 300 47 | export default withNProgress(msDelay)(MyApp); 48 | ``` 49 | 50 | Internally it will use the NProgress component and render it alongside your application. 51 | 52 | ### Advanced Config 53 | 54 | You can configure further configure NProgress using its [configuration options](https://github.com/rstacruz/nprogress#configuration). 55 | 56 | Configure the component: 57 | 58 | ```jsx 59 | 65 | ``` 66 | 67 | Configure the HOC: 68 | 69 | ```js 70 | const msDelay = 200; 71 | const options = { trickleSpeed: 50 }; 72 | export default withNProgress(msDelay, options)(MyApp); 73 | ``` 74 | -------------------------------------------------------------------------------- /component.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./dist/component.js"); 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./dist/hoc.js"); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-nprogress", 3 | "version": "1.4.0", 4 | "main": "index.js", 5 | "repository": "https://github.com/sergiodxa/next-nprogress.git", 6 | "author": "Sergio Xalambrí (https://sergiodxa.com)", 7 | "license": "MIT", 8 | "keywords": [ 9 | "nextjs", 10 | "react", 11 | "nprogress", 12 | "progress bar", 13 | "hoc", 14 | "high order component" 15 | ], 16 | "scripts": { 17 | "build": "babel src -d dist", 18 | "prepublish": "npm run build" 19 | }, 20 | "dependencies": { 21 | "nprogress": "^0.2.0" 22 | }, 23 | "peerDependencies": { 24 | "next": "^6.0.0 || ^7.0.0", 25 | "react": "^16.0.0", 26 | "styled-jsx": "^2.0.0 || ^3.0.0" 27 | }, 28 | "devDependencies": { 29 | "@babel/cli": "7.2.3", 30 | "@babel/core": "7.3.4", 31 | "@babel/plugin-proposal-class-properties": "7.3.4", 32 | "@babel/preset-env": "7.3.4", 33 | "@babel/preset-react": "7.0.0", 34 | "babel-preset-minify": "0.5.0", 35 | "eslint": "5.14.1", 36 | "eslint-config-prettier": "4.1.0", 37 | "eslint-plugin-prettier": "3.0.1", 38 | "eslint-plugin-react": "7.12.4", 39 | "eslint-plugin-unicorn": "7.1.0", 40 | "next": "7.0.3", 41 | "prettier": "1.16.4", 42 | "react": "16.8.4" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/component.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import NProgress from "nprogress"; 3 | import Router from "next/router"; 4 | 5 | class NProgressContainer extends React.Component { 6 | static defaultProps = { 7 | color: "#2299DD", 8 | showAfterMs: 300, 9 | spinner: true 10 | }; 11 | 12 | timer = null; 13 | 14 | routeChangeStart = () => { 15 | const { showAfterMs } = this.props; 16 | clearTimeout(this.timer); 17 | this.timer = setTimeout(NProgress.start, showAfterMs); 18 | } 19 | 20 | routeChangeEnd = () => { 21 | clearTimeout(this.timer); 22 | NProgress.done(); 23 | } 24 | 25 | componentDidMount() { 26 | const { options } = this.props; 27 | 28 | if (options) { 29 | NProgress.configure(options); 30 | } 31 | 32 | Router.events.on('routeChangeStart', this.routeChangeStart); 33 | Router.events.on('routeChangeComplete', this.routeChangeEnd); 34 | Router.events.on('routeChangeError', this.routeChangeEnd); 35 | } 36 | 37 | componentWillUnmount() { 38 | clearTimeout(this.timer); 39 | Router.events.off('routeChangeStart', this.routeChangeStart); 40 | Router.events.off('routeChangeComplete', this.routeChangeEnd); 41 | Router.events.off('routeChangeError', this.routeChangeEnd); 42 | } 43 | 44 | render() { 45 | const { color, spinner } = this.props; 46 | 47 | return ( 48 | 128 | ); 129 | } 130 | } 131 | 132 | export default NProgressContainer; 133 | -------------------------------------------------------------------------------- /src/hoc.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import NProgress from "./component"; 3 | 4 | export default (delayMs, options) => Page => 5 | class extends Component { 6 | static getInitialProps = Page.getInitialProps; 7 | render() { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /styles.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./dist/styles.js"); --------------------------------------------------------------------------------