use-progress v2.0.1

use-progress

Add and control progress bars across the top of any page easily with a React Hook

Installation

npm install --save use-progress

Importing the hook

import useProgress from ' use-progress'  

Usage

By default, the progress bar will start when a component first begins to mount, and finish when it first renders/completes.

import React from 'react';
import { render } from 'react-dom';
import 'use-progress/use-progress.css';
import useProgress from 'use-progress';

function App() {
  useProgress();
  return (
    <div style={{ minHeight: '100vh' }}>Foo!</div>
  )
}
render(<App />, document.getElementById("root"));

By default useProgress will only track whether a component has finished mounting. You can override this functionality and control when its complete by passing mountOnly: false and manually invoking the provided done function.

const wait = (done) => setTimeout(() => done(), 1000);

function App() {
  const [status, done] = useProgress({ mountOnly: false });
  wait(done);
  return (
    <div style={{ minHeight: '100vh' }}>Foo!</div>
  )
}

Arguments

Return Values