topbar usage

[cadentic]

hi

can anyone provide me an usage example for nextjs project ? i want to use it on every page of the website. whenever page will be reloading / refreshed then it must show the topbar ? how to do it? which means it must not be controlled by any button rather it will be controlled while the page will be refreshed/reloaded etc.

let me know an easy way to achieve it.

[Rasukarusan]

@cadentic Hi! I'll post my example.

_app.tsx

...
import { TopLoadingBar } from './TopLoadingBar'

export default function MyApp(props) {
  const { Component, pageProps } = props
}
  return (
    <>
        <TopLoadingBar />
        <Component {...pageProps} />
    </>
)

TopLoadingBar.tsx

import { useEffect, useRef } from 'react'
import Router from 'next/router'
import LoadingBar, { LoadingBarRef, IProps } from 'react-top-loading-bar'

export const TopLoadingBar: React.FC<IProps> = (props) => {
  const ref = useRef<LoadingBarRef>(null)

  useEffect(() => {
    const handleRouteStart = () => ref.current.continuousStart()
    const handleRouteDone = () => ref.current.complete()

    Router.events.on('routeChangeStart', handleRouteStart)
    Router.events.on('routeChangeComplete', handleRouteDone)
    Router.events.on('routeChangeError', handleRouteDone)

    return () => {
      Router.events.off('routeChangeStart', handleRouteStart)
      Router.events.off('routeChangeComplete', handleRouteDone)
      Router.events.off('routeChangeError', handleRouteDone)
    }
  }, [])

  return <LoadingBar color="#f11946" ref={ref} {...props} />
}

[klendi]

Closing this since an example is provided. Might consider to do a nextjs example project into the example folder in the future! @Rasukarusan btw you are more than welcome to make a PR and contribute to this repo if you wish!