useProgress

Hook that creates a lightweight progress bar

time

medium

test coverage

Last changed: 15 days ago

Installation

Library

CLI

Manual

import { useProgress } from '@siberiacancode/reactuse';

Usage

const { value, active, start, done, inc, set, remove } = useProgress(0.2);

## Demo

source

Api

Parameters

Name	Type	Default	Note
initialProgress?	number	-	Initial progress value in range 0..1
options.active?	boolean	-	Controls progress externally (true -> start, false -> done)
options.maximum?	number	0.95	Maximum value when progress starts
options.speed?	number	250	Auto increment interval in milliseconds
options.rate?	number	0.02	Additional random increment amount on each tick
options.delay?	number	250	Delay before reset to null after done

Returns

UseProgressReturn

Type declaration

export interface UseProgressOptions {
  /** Delay before reset to null after done */
  delay?: number;
  /** Start progress immediately */
  immediately?: boolean;
  /** Maximum progress value */
  maximum?: number;
  /** Additional random amount for each auto increment */
  rate?: number;
  /** Auto-increment frequency in milliseconds */
  speed?: number;
}

export interface UseProgressReturn {
  /** Whether progress is currently active */
  active: boolean;
  /** Current progress value in range 0..1, null means hidden */
  value: number;
  /** Complete progress to 100% */
  done: (force?: boolean) => number | null;
  /** Increment progress with easing behavior */
  inc: (amount?: number) => number | null;
  /** Remove progress and stop timers */
  remove: () => void;
  /** Start progress and auto incrementing */
  start: (from?: number | null) => number;
}

Source

Source • Demo

Contributors

D

debabin