@fractal-web/next-nprogress-bar
v2.1.2
Published
NextJS progress bar compatible with new app directory
Downloads
6
Maintainers
fractal-webReadme
Table of Contents
- Getting started
- Exemple with /pages/_app
- Exemple with /app/layout
- Props
- App directory router
- Migrating from v1 to v2
- Issues
- LICENSE
Getting started
Install
npm install next-nprogress-baror
yarn add next-nprogress-barImport
Import it into your /pages/_app(.js/.jsx/.ts/.tsx) or /app/layout(.js/.jsx/.ts/.tsx) folder
// In app directory
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
// In pages directory
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';Use
<ProgressBar />Exemple with /pages/_app
JavaScript
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</>
);
}TypeScript
import type { AppProps } from 'next/app';
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</>
);
}Exemple with /app/layout
JavaScript
First approach in a use client layout
// In /app/layout.jsx
'use client';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</body>
</html>
);
}Second approach wrap in a use client Providers component
// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
const Providers = ({ children }) => {
return (
<>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</>
);
};
export default Providers;
// Import and use it in /app/layout.jsx
import Providers from './providers';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}TypeScript
First approach in a use client layout
// In /app/layout.tsx
'use client';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</body>
</html>
);
}Second approach wrap in a use client Providers component
// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
const Providers = ({ children }: { children: React.ReactNode }) => {
return (
<>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</>
);
};
export default Providers;
// Import and use it in /app/layout.tsx
import Providers from './providers';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}Props
height optional - string
Height of the progress bar - by default 2px
color optional - string
Color of the progress bar - by default #0A2FFF
options optional - NProgressOptions
by default undefined
See NProgress docs
shallowRouting optional - boolean
If the progress bar is not displayed when you use shallow routing - by default false
See Next.js docs
delay optional - number
When the page loads faster than the progress bar, it does not display - by default 0
style optional - string
Your custom CSS - by default NProgress CSS
App directory router
Import
import { useRouter } from 'next-nprogress-bar';Use
Replace your 'next/navigation' routers with this one. It's the same router, but this one supports NProgress.
const router = useRouter();
// With progress bar
router.push('/about');
router.back();
// Without progress bar
router.push(
'/about',
{},
{
showProgressBar: false,
},
);
router.back({ showProgressBar: false });Migrating from v1 to v2
Pages directory
// before (v1)
import ProgressBar from 'next-nprogress-bar';
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>;
// after (v2)
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>;App directory
// before (v1)
import ProgressBar from 'next-nprogress-bar';
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
appDirectory
shallowRouting
/>;
// after (v2)
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>;Issues
Please file an issue for bugs, missing documentation, or unexpected behavior.
LICENSE
MIT