useNProgress

Category

@Integrations

Export Size

430 B

Package

@reause/integrations

Last Changed

5 days ago

Reactive wrapper for nprogress.

Demo

Install

npm i nprogress@^0

Usage

import { useNProgress } from '@reause/integrations'

const { isLoading, setIsLoading } = useNProgress()

function toggle() {
  setIsLoading(!isLoading)
}

Passing a progress percentage

You can pass a percentage to indicate where the bar should start from.

import { useNProgress } from '@reause/integrations'

const { progress, setProgress } = useNProgress(0.5)

function done() {
  setProgress(1.0)
}

To change the progress percentage, call setProgress(n), where n is a number between 0..1.

Customization

Just edit nprogress.css to your liking. Tip: you probably only want to find and replace occurrences of #29d.

You can configure it by passing an object as a second parameter.

import { useNProgress } from '@reause/integrations'

useNProgress(null, {
  minimum: 0.1,
  // ...
})

Type Declarations

export type UseNProgressOptions = Partial<NProgressOptions>

export interface UseNProgressReturn {
    readonly progress: number | null | undefined;
    readonly setProgress: Dispatch<SetStateAction<number | null | undefined>>;
    readonly isLoading: boolean;
    readonly setIsLoading: Dispatch<SetStateAction<boolean>>;
    readonly start: () => NProgress;
    readonly done: (force?: boolean) => NProgress;
    readonly remove: () => void;
}

export function useNProgress(currentProgress?: number | null | undefined, options?: UseNProgressOptions): UseNProgressReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

f6172 - fix(integrations): resolve useNProgress audit findings (#805)

fb298 - feat(integrations): add useNProgress (#172)