https://github.com/apal21/nextjs-progressbar

A simple Next.js progressbar component using NProgress.
https://github.com/apal21/nextjs-progressbar

Last synced: 1 day ago
JSON representation

A simple Next.js progressbar component using NProgress.

• Host: GitHub
• URL: https://github.com/apal21/nextjs-progressbar
• Owner: apal21
• License: mit
• Created: 2019-01-19T11:57:42.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-03-18T21:22:53.000Z (8 months ago)
• Last Synced: 2024-05-17T08:02:54.997Z (6 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/nextjs-progressbar
• Size: 3.59 MB
• Stars: 760
• Watchers: 4
• Forks: 58
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-NextJs - nextjs-progressbar - [demo](https://demo-nextjs-progressbar.vercel.app/) - [documentatios](https://gosink.in/next-js-make-your-own-progress-bar-indicator-component-easily/) ++ (Nextjs Plugins)

README

        
# Next.js Progressbar

A simple Next.js progressbar component using [NProgress](http://ricostacruz.com/nprogress/).

> [I've created this Blog to help you create your own progressbar](https://gosink.in/next-js-make-your-own-progress-bar-indicator-component-easily/)

**Demo**: [https://demo-nextjs-progressbar.vercel.app](https://demo-nextjs-progressbar.vercel.app/)

## How to install?

```bash

npm i nextjs-progressbar

```

## How to use?

After installing the package, import `NextNProgress` in your `pages/_app.js` file:

```js

import NextNProgress from 'nextjs-progressbar';

```

And for rendering add `` to your `return()` in `MyApp()`:

```js

import NextNProgress from 'nextjs-progressbar';

export default function MyApp({ Component, pageProps }) {

  return (

    <>

      

      ;

    >

  );

}

```

### Default Config

If no props are passed to ``, below is the default configuration applied.

```jsx

```

- `color`: to change the default color of progressbar. You can also use `rgb(,,)` or `rgba(,,,)`.

- `startPosition`: to set the default starting position : `0.3 = 30%`.

- `stopDelayMs`: time for delay to stop progressbar in `ms`.

- `height`: height of progressbar in `px`.

- `showOnShallow`: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing [in Next.js docs](https://nextjs.org/docs/routing/shallow-routing).

### Advanced Config

#### Adding nonce

We use internal css in this package. If you are using csp, you can add nonce to the `` tag by providing `nonce` prop to `<NextNProgress />` component.

```jsx

<NextNProgress nonce="my-nonce" />

```

#### Custom CSS

You can use `transformCSS` prop to pass custom css.

**Note:** You must return a `JSX.Element` from the function.

```jsx

<NextNProgress

  transformCSS={(css) => {

    // css is the default css string. You can modify it and return it or return your own css.

    return <style>{css};

  }}

/>

```

#### Other Configs

You can use [other configurations](https://github.com/rstacruz/nprogress#configuration) which NProgress provides by adding a JSON in `options` props.

```jsx

```