use-progress-bar

Hook to use progress bar in React

Demo

Open in CodeSandbox

Installation

$ yarn add use-progress-bar

Usage

import React from 'react'
import { useProgressBar } from 'use-progress-bar'

const ProgressBar = ({ isLoading }) => {
  const { status, progress } = useProgressBar(isLoading)

  const style = {
    opacity: status !== 'progress' ? 0 : 1,
    top: 0,
    position: 'absolute',
    left: 0,
    display: 'block',
    background: '#29d',
    width: `${progress}%`,
    height: '4px',
    transition: `width 200ms ease-in, opacity 200ms ease-in 200ms`,
    zIndex: 10,
  }

  return <div style={style} />
}

useProgressBar()

useProgressBar(isLoading: boolean, options?: Options): ProgressBar

ProgressBar

• status: 'idle' | 'progress' | 'completed'
• progress: number

Options

• duration?: number
  • Default: 11000 ms
  • Progress time to the max
• frequency?: number
  • Default: 200 ms
  • Frequency of progress updates
• max?: number
  • Default: 80
  • Maximum progress until completion