nextjs-progressbar

> 编程语言

开源

使用 NProgress 创建的简单 Next.js 进度条组件

789 stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

使用 NProgress 创建的简单 Next.js 进度条组件

Next.js Progressbar

A simple Next.js progressbar component using NProgress.

I've created this Blog to help you create your own progressbar

Demo: 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:

javascript

import NextNProgress from 'nextjs-progressbar';

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

javascript

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.

javascript

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.

Advanced Config

Adding nonce

We use internal css in this package. If you are using csp, you can add nonce to the ` ; }} />


#### Other Configs

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

```jsx