mock-progress-react

Installation

To install the latest stable version:

npm install --save mock-progress-react

Basic usage:

import React from "react";
import { useMockProgress } from "mock-progress-react";

function App() {

  const { start, finish, progress } = useMockProgress(); 
  return (
    <div className="App">    
        <p>Progress: {progress}</p> 
        <button onClick={start}> start progress</button>  
        <button onClick={finish}> complete progress</button> 
    </div>
  );
}

Customize parameters:

import React from "react";
import { useMockProgress } from "mock-progress-react";

function App() {

  const { progress, finish, start } = useMockProgress({timeInterval:1000, autoComplete:false});
  return (
    <div className="App">    
        <p>Progress: {progress}</p>
        <button onClick={start}> start progress </button>  
        <button onClick={finish}> complete progress</button> 
    </div>
  );
}

Demo

CodeSandbox Link

Return values

Name	Type	Description
progress	number	The actual progress value
start	function	Function to start progress. Progress will only be started by this function not on component mount. P.S : if progress has finished already, it will not be reset to 0 on calling start again.
finish	function	Function to finish progress. Progress will be completed i.e. set to 100 whenever this function is called.

API

Name	Type	Required	Default	Description
timeInterval	number	false	500	Time interval in milliseconds for increment in progress
autoComplete	boolean	false	true	Allows user to control if progress will be completed manually or not. If true, progress automatically completes to max i.e. 100. If false, progress will reach till manual max i.e. 98 and can only be set to 100 when user calls finish function manually

License