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

With ref

import React, { useRef } from 'react'
import LoadingBar from 'react-top-loading-bar'

const App = () => {
  const ref = useRef(null)

  return (
    <div>
      <LoadingBar color='#f11946' ref={ref} />
      <button onClick={() => ref.current.continuousStart()}>
        Start Continuous Loading Bar
      </button>
      <button onClick={() => ref.current.staticStart()}>
        Start Static Loading Bar
      </button>
      <button onClick={() => ref.current.complete()}>Complete</button>
      <br />
    </div>
  )
}

export default App

With state

import React, { useState } from 'react'
import LoadingBar from 'react-top-loading-bar'

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

  return (
    <div>
      <LoadingBar
        color='#f11946'
        progress={progress}
        onLoaderFinished={() => setProgress(0)}
      />
      <button onClick={() => setProgress(progress + 10)}>Add 10%</button>
      <button onClick={() => setProgress(progress + 20)}>Add 20%</button>
      <button onClick={() => setProgress(100)}>Complete</button>
      <br />
    </div>
  )
}

export default App

Demo

Click here for demo

Built-in Methods

Properties

Projects using react-top-loading-bar

• React Movies
• WCYB

Add your own project. Make a PR

Migrate from V.1

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

Code Style

License

MIT © Klendi Gocci | klendi.dev