https://github.com/ndungtse/next13-progressbar
A simple Next.js progressbar component using NProgress with support of next.js >=13 app dir.
https://github.com/ndungtse/next13-progressbar
app-router-nextjs appdir nextjs13 nprogress toploader
Last synced: about 2 months ago
JSON representation
A simple Next.js progressbar component using NProgress with support of next.js >=13 app dir.
- Host: GitHub
- URL: https://github.com/ndungtse/next13-progressbar
- Owner: ndungtse
- License: mit
- Created: 2023-06-28T17:06:55.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-16T13:51:26.000Z (7 months ago)
- Last Synced: 2024-10-18T13:30:02.561Z (7 months ago)
- Topics: app-router-nextjs, appdir, nextjs13, nprogress, toploader
- Language: TypeScript
- Homepage: https://next13-progressbar.vercel.app
- Size: 462 KB
- Stars: 93
- Watchers: 2
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Next.js 13 Progressbar
A simple Next.js progressbar component using [NProgress](http://ricostacruz.com/nprogress/) with support of next.js 13 and later app dir.
**Demo**: [https://next13-progressbar.vercel.app/](https://next13-progressbar.vercel.app/)
## How to install?
```bash
npm i next13-progressbar
```
## How to use?
⚠️ **_Note_** : This docs are for versions `>=1.0.0` only. For the older versions check tags versions tree's Readme of the older version.
After installing the package, create `providers.tsx` file in app directory to handle contexts and mark it `use client`. see [contexts in app dir](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers) and import `Next13ProgressBar;
```jsx
'use client';
import React from 'react';
import { Next13ProgressBar } from 'next13-progressbar';
const Providers = ({ children }: { children: React.ReactNode }) => {
return (
<>
{children}
>
);
};
export default Providers;
```
Wrap your providers in `layout.tsx/js`
```jsx
import Providers from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
By default all `a` tags are handled by `next/link` so you don't need to do anything.
```jsx
import Link from 'next/link';
import { useRouter } from 'next13-progressbar';
const NavBar = () => {
const router = useRouter();
return (
Home
About
Contact
router.push('/button-link')}>ButtonLink
);
};
```
### 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%`.
- `delay`: time for delay to start progressbar in `ms`.
- `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 `<NProvider />` component.
```jsx
<Next13ProgressBar nonce="my-nonce" />
```
#### Custom CSS
You can pass custom css to the progressbar by using `style` prop.
```jsx
<Next13ProgressBar
style={`
#nprogress {
pointer-events: none;
}
`}
/>
```
### Older Versions
Check Branches with `v` prefix for older docs of the package.
If not found check tags versions tree's Readme of the older version.
## Contributing
Any Contribution of any kind are appreciated. You can start by forking this repository and make your changes then submit a pull request
## Author
- [Ndungutse Charles](https://github.com/NdungutseCharles103)
## Support
Your support matters. It pushes me to do more Open Source contributions and give back to the community.
<a href="https://www.buymeacoffee.com/ndungutse" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>