group | package | title | order | slug | description | props | import | source | docs | installation | license | |
---|---|---|---|---|---|---|---|---|---|---|---|---|
Other packages |
@mantine/nprogress |
Navigation progress |
1 |
/others/nprogress/ |
Navigation progress bar |
|
import { NavigationProgress } from '@mantine/nprogress'; |
mantine-nprogress/src |
others/nprogress.mdx |
@mantine/nprogress |
MIT |
import { NProgressDemos } from '@mantine/demos';
Package depends on @mantine/core
and @mantine/hooks
.
Install with yarn:
yarn add @mantine/nprogress @mantine/core @mantine/hooks
Install with npm:
npm install @mantine/nprogress @mantine/core @mantine/hooks
Render NavigationProgress
anywhere in your app within MantineProvider:
import { MantineProvider } from '@mantine/core';
import { NavigationProgress } from '@mantine/nprogress';
function Demo() {
return (
<MantineProvider>
<NavigationProgress />
<App />
</MantineProvider>
);
}
Create RouterTransition
component that will handle router events:
// components/RouterTransition.tsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import {
startNavigationProgress,
resetNavigationProgress,
NavigationProgress,
} from '@mantine/nprogress';
export function RouterTransition() {
const router = useRouter();
useEffect(() => {
const handleStart = (url: string) => url !== router.asPath && startNavigationProgress();
const handleComplete = () => resetNavigationProgress();
router.events.on('routeChangeStart', handleStart);
router.events.on('routeChangeComplete', handleComplete);
router.events.on('routeChangeError', handleComplete);
return () => {
router.events.off('routeChangeStart', handleStart);
router.events.off('routeChangeComplete', handleComplete);
router.events.off('routeChangeError', handleComplete);
};
}, [router.asPath]);
return <NavigationProgress />;
}
Then render it in _app.tsx
within MantineProvider:
// pages/_app.tsx
import { AppProps } from 'next/app';
import { MantineProvider } from '@mantine/core';
import { RouterTransition } from '../components/RouterTransition';
export default function App(props: AppProps) {
const { Component, pageProps } = props;
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<RouterTransition />
<Component {...pageProps} />
</MantineProvider>
);
}
NavigationProgress
uses Progress
component under the hood, to pass aria-label
use progressLabel
props
<NavigationProgress progressLabel="Loading Page" />