useProgress

The useProgress hook is used to manipulate the progress state.

Import

import { useProgress } from '@bprogress/...';

Note

Replace the ... in the import with the library you're using. For example, if you use @bprogress/next, import by doing from '@bprogress/next'

Usage

const {
  start,
  stop,
  inc,
  dec,
  set,
  pause,
  resume,
  setOptions,
  getOptions,
  isAutoStopDisabled,
  disableAutoStop,
  enableAutoStop,
  shallowRouting,
  disableSameURL,
  startPosition,
  delay,
  stopDelay,
} = useProgress();

Methods

start

Start the progress bar.

start();
// or
start(0.3, 1000, true);

stop

Stop the progress bar.

stop();
// or
stop(1000);

inc

Increase the progress bar (between 0 and 1).

inc(0.1);

dec

Decrease the progress bar (between 0 and 1).

dec(0.1);

set

Set the progress bar (between 0 and 1).

set(0.5);

pause

Pause the progress bar.

pause();

resume

Resume the progress bar.

resume();

setOptions

Set the progress bar options.

setOptions({ showSpinner: false });
// or
setOptions((options) => ({ ...options, showSpinner: true }));

getOptions

Get the progress bar options.

const options = getOptions();

isAutoStopDisabled

Check if the auto stop is disabled.

const isDisabled = isAutoStopDisabled.current;

Note

When you navigate between pages, the stop is played automatically, so if you don't want the progress to stop by itself when you manipulate the URL, this ref is useful.

disableAutoStop

Disable the auto stop.

disableAutoStop();

enableAutoStop

Enable the auto stop.

enableAutoStop();

Types

interface ProgressContextValue {
  start: (
    startPosition?: number,
    delay?: number,
    autoStopDisabled?: boolean,
  ) => void;
  stop: (stopDelay?: number, forcedStopDelay?: number) => void;
  inc: (amount?: number) => void;
  dec: (amount?: number) => void;
  set: (n: number) => void;
  pause: () => void;
  resume: () => void;
  setOptions: (
    options:
      | Partial<BProgressOptions>
      | ((prevOptions: BProgressOptions) => Partial<BProgressOptions>),
  ) => void;
  getOptions: () => BProgressOptions;
  isAutoStopDisabled: React.RefObject<boolean>;
  disableAutoStop: () => void;
  enableAutoStop: () => void;
  shallowRouting: boolean;
  disableSameURL: boolean;
  startPosition: number;
  delay: number;
  stopDelay: number;
}

useProgress

On this page