React Router Topbar

Top Loading Bar component for React Router v6, that just works.

• made using NProgress.
• supports data route with loader
• supports future.v7_startTransition

See the demo for detail.

Install

npm install react-router-topbar
pnpm install react-router-topbar
yarn add react-router-topbar

Usage

Place the topbar component inside your router's root component.

import{createBrowserRouter,RouterProvider}from"react-router-dom";importReactRouterTopbarfrom"react-router-topbar";functionApp(){return(<RouterProviderfuture={{v7_startTransition: true}}router={router}/>);}exportdefaultApp;constrouter=createBrowserRouter([{path: "/",element: <Root/>,children: [
...
],},]);functionRoot(){return(<><ReactRouterTopbar/>
...
</>);}

Default Configuration

If no props are passed to <ReactRouterTopbar />, below is the default configuration applied.

<ReactRouterTopbarcolor="#2299DD"initialPosition={0.08}crawlSpeed={200}height={3}crawl={true}showSpinner={true}easing="ease"speed={200}shadow="0 0 10px #2299DD,0 0 5px #2299DD"template='<div class="bar" role="bar"><div class="peg"></div></div>  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'zIndex={1600}showAtBottom={false}/>

• color: to change the default color of TopLoader.
• initialPosition: to change initial position for the TopLoader in percentage, : 0.08 = 8%.
• crawlSpeed: increment delay speed in ms.
• speed: animation speed for the TopLoader in ms
• easing: animation settings using easing (a CSS easing string).
• height: height of TopLoader in px.
• crawl: auto incrementing behavior for the TopLoader.
• showSpinner: to show spinner or not.
• shadow: a smooth shadow for the TopLoader. (set to false to disable it)
• template: to include custom HTML attributes for the TopLoader.
• zIndex: defines zIndex for the TopLoader.
• showAtBottom: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)

ReactRouterTopbarProps (props passed to the TopLoader)

Name	Type	Default Value
color	string	"#2299DD"
initialPosition	number	0.08
crawlSpeed	number	200
height	number	3
crawl	boolean	true
showSpinner	boolean	true
easing	string	"ease"
speed	number	200
shadow	string | false	"0 0 10px #2299DD,0 0 5px #2299DD"
template	string	"<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>"
zIndex	number	1600
showAtBottom	boolean	false

License

MIT.

Basic structure from Nextjs Toploader.