Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/apal21/nextjs-progressbar
A simple Next.js progressbar component using NProgress.
https://github.com/apal21/nextjs-progressbar
Last synced: 4 days 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 (9 months ago)
- Last Synced: 2024-05-17T08:02:54.997Z (7 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
```