Coded Geekery

BlogAboutContact
BlogAboutContact

Loading Progress

React Hook for nprogress.

Loading Progress
// components/nprogress.tsx import NProgress from 'nprogress'; import { useRouter } from 'next/router'; import { useEffect } from 'react'; export default function Progress() { const router = useRouter(); useEffect(() => { let timeout: NodeJS.Timeout; const start = () => { timeout = setTimeout(NProgress.start, 100); }; const done = () => { clearTimeout(timeout); NProgress.done(); }; router.events.on('routeChangeStart', start); router.events.on('routeChangeComplete', done); router.events.on('routeChangeError', done); return () => { router.events.off('routeChangeStart', start); router.events.off('routeChangeComplete', done); router.events.off('routeChangeError', done); }; }, []); return <></>; }
/* nprogress.css */ /* Make clicks pass-through */ #nprogress { pointer-events: none; } #nprogress .bar { background: #845ef7; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; }
// pages/_app.tsx import '@styles/nprogress.css'; import type { AppProps } from 'next/app'; import NProgress from '../components/nprogress'; export default function App({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> <NProgress /> </> ); }

Coded Geekery

© 2021 Roger Stringer. All rights reserved.

TwitterGitHubInstagram

Stuff

HomeAbout MeContact Me

Not Playing

Spotify