next-styled-nprogress

next-styled-nprogress

Add NProgress loader between pages in your Next.js App

Table of Contents

• Install
• Usage
• Contribute
• License

Install

This project uses node and npm. It requires Next, React, nprogress and styled-components as peer dependencies,

$ npm install next-styled-nprogress
$ # OR
$ yarn add next-styled-nprogress

Usage

In _app.js:

import PageNProgress from 'next-styled-nprogress'

class Example extends App {
    // ...
    render () {

        return (
        <Container>
            <GlobalStyles />

            <PageNProgress
                color='#F2A83B'
                showSpinner={false}
                height='5px'
                delay={200}
            />

            <Component />
        </Container>
        )
    }
}

NProgress can also now be used across site, as the styles are already included:

import React from 'react'
import NProgress from  'nprogress'


const Example = () => {

    const handleClick = () => {
        NProgress.start()

        setTimeout(() => {
            NProgress.done()
        }, 1000)
    }

    return <button type="button" onClick={handleClick}>Click me</button>
}

Contribute

• Fork it and create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am "Add some feature"
• Push to the branch: git push origin my-new-feature
• Submit a pull request

License

MIT