nprogress.mdx

group	package	title	order	slug	description	props	import	source	docs	installation	license
Other packages	@mantine/nprogress	Navigation progress	1	/others/nprogress/	Navigation progress bar	NavigationProgress	import { NavigationProgress } from '@mantine/nprogress';	mantine-nprogress/src	others/nprogress.mdx	@mantine/nprogress	MIT

import { NProgressDemos } from '@mantine/demos';

Installation

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

Setup NavigationProgress

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>
  );
}

Usage

Usage with Next.js

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>
  );
}

Accessibility

NavigationProgress uses Progress component under the hood, to pass aria-label use progressLabel props

<NavigationProgress progressLabel="Loading Page" />