hi can anyone provide me an usage example for nextjs project ? i wan

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

topbar usage about react-top-loading-bar HOT 2 CLOSED

klendi commented on May 26, 2024

topbar usage

from react-top-loading-bar.

Comments (2)

klendi commented on May 26, 2024 1

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!

from react-top-loading-bar.

Rasukarusan commented on May 26, 2024

@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} />
}