react-top-loading-bar

>

Install

• using npm

npm install --save react-top-loading-bar

• using yarn

yarn add react-top-loading-bar

• CDN

https://unpkg.com/react-top-loading-bar

Usage

Using hooks

import { useLoadingBar } from "react-top-loading-bar";

const App = () => {
  const { start, complete } = useLoadingBar({
    color: "blue",
    height: 2,
  });

  return (
    <div>
      <button> start()}&gt;Start</button>
      <button> complete()}&gt;Complete</button>
    </div>
  );
};

Wrap the app with LoadingBarContainer

import { LoadingBarContainer } from "react-top-loading-bar";

const Parent = () => {
  return (
    
      
    
  );
};

With ref

import { useRef } from "react";
import LoadingBar, { LoadingBarRef } from "react-top-loading-bar";

const App = () => {
  // prettier-ignore
  const ref = useRef(null);

  return (
    <div>
      
      <button> ref.current?.continuousStart()}&gt;
        Start Continuous Loading Bar
      </button>
      <button> ref.current?.staticStart()}&gt;
        Start Static Loading Bar
      </button>
      <button> ref.current?.complete()}&gt;Complete</button>
    </div>
  );
};

With state

import { useState } from "react";
import LoadingBar from "react-top-loading-bar";

const App = () => {
  const [progress, setProgress] = useState(0);

  return (
    <div>
       setProgress(0)}
      /&gt;
      <button> setProgress(progress + 10)}&gt;Add 10%</button>
      <button> setProgress(progress + 20)}&gt;Add 20%</button>
      <button> setProgress(100)}&gt;Complete</button>
    </div>
  );
};

Demo

Click here for demo

Built-in Methods

Properties

Migrate from V.1

• Replace onRef prop with 'ref', assign it to a react ref. Access methods with reactRef.current.xxx

Migrate from V.2

• Replace ref.current.continuousStart() with ref.current?.start()
• Replace ref.current.staticStart() with ref.current?.start("static")

License

MIT © Klendi Goci | klendi.dev | GitHub @klendi