react-router-topbar
v0.0.2
Published
React Router top loading bar component made using NProgress, compatible with React transition and router loaders.
Downloads
425
Maintainers
Readme
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";
import ReactRouterTopbar from "react-router-topbar";
function App() {
return (
<RouterProvider future={{ v7_startTransition: true }} router={router} />
);
}
export default App;
const router = createBrowserRouter([
{
path: "/",
element: <Root />,
children: [
...
],
},
]);
function Root() {
return (
<>
<ReactRouterTopbar />
...
</>
);
}
Default Configuration
If no props are passed to <ReactRouterTopbar />
, below is the default configuration applied.
<ReactRouterTopbar
color="#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 inms
.speed
: animation speed for the TopLoader inms
easing
: animation settings using easing (a CSS easing string).height
: height of TopLoader inpx
.crawl
: auto incrementing behavior for the TopLoader.showSpinner
: to show spinner or not.shadow
: a smooth shadow for the TopLoader. (set tofalse
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.