Awesome

use-auto-progress

React hook for value and related control functions for displaying Progress component, which can progress by itself.

Implement algorithm for making progress bar feel faster. Try it out at Code SandBox.

Install

npm install --save use-auto-progress

Usage

useAutoProgress

function useAutoProgress(
  options? : Options
): [number, (b: boolean) => void, boolean]

Example

import * as React from 'react'

import useAutoProgress from 'use-auto-progress'

const Example = () => {
  const [value, setStart, running] = useAutoProgress();

  const toggle = () => {
    const s = !running;
    setStart(s);
  };

  return (
    <div>
      <Button onClick={toggle}>{running ? 'Stop' : 'Start'}</Button>
      <Progress value={value}>{value}%</Progress>
    </div>
  )
}

Options (optional)

intervalMs : Number of ms between each value update. Default is 500.

Example:

  useAutoProgress({intervalMs : 1000})

steps : Steps for value updates. Default is [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].

Final value for steps is always 100, which is displayed when setStart(false) is called. It is not required to include in the steps option.

Example:

  useAutoProgress({steps : [0, 25, 50, 75, 100]})

returns

The function returns an array of three elements: value (number), setStart function ((b: boolean) => void), and running (boolean).

value : Value to set on Progress element.

setStart : Function (b: boolean) => void to start the auto progress algorithm. Set to true to start and false to stop.

running : Boolean indicating if progress algorithm is running. If true, it is running, false it is stop. When it stops, the value is set to 100.

License

This hook is created using create-react-hook.