useAnchorProgress

There are two ways to set up a progress bar that is triggered during navigation:

If the framework has a router that detects the start and end of navigation (like the Next.js Pages Directory router, for example), you can use the useProgress hook to trigger the progress bar at the start of navigation and stop it when you reach the target page.
If the framework has a router that doesn't detect the start and end of navigation (like the Next.js App Directory router, for example), you can use this useAnchorProgress hook to activate navigation detection based on <a> elements in dom and window.history.

Import

import { useAnchorProgress } from '@bprogress/react';

Usage

useAnchorProgress(
  {
    shallowRouting,
    disableSameURL,
    startPosition,
    delay,
    stopDelay,
    targetPreprocessor,
    disableAnchorClick,
    startOnLoad,
  },
  [navigation],
)

Parameters

function useAnchorProgress(options: UseAnchorProgressOptions, deps: any[]): void;

Options

Prop	Type	Default
`shallowRouting`	`boolean`	`false`
`disableSameURL`	`boolean`	`true`
`startPosition`	`number`	`0`
`delay`	`number`	`0`
`stopDelay`	`number`	`0`
`targetPreprocessor`	`(url: URL) => URL`	`undefined`
`disableAnchorClick`	`boolean`	`false`
`startOnLoad`	`boolean`	`false`
`forcedStopDelay`	`number`	`0`

Example

progress.tsx

import {
  useAnchorProgress,
  withMemo,
  type AnchorProgressProps,
} from '@bprogress/react';
import { useRouterNavigation } from '...';
 
const ProgressComponent = (props: AnchorProgressProps) => {
  const routerNavigation = useRouterNavigation();
 
  useAnchorProgress(
    {
      ...props,
      forcedStopDelay: 500,
    },
    [routerNavigation],
  );
 
  return null;
};
 
export const Progress = withMemo(ProgressComponent);
 
Progress.displayName = 'Progress';

useAnchorProgress

Import

Usage

Parameters

Options

Example

On this page