Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ha1fstack/react-router-topbar
A React Router Top Loading Bar component made using nprogress, compatible with React transition and router loaders.
https://github.com/ha1fstack/react-router-topbar
react react-router topbar toploader
Last synced: about 1 month ago
JSON representation
A React Router Top Loading Bar component made using nprogress, compatible with React transition and router loaders.
- Host: GitHub
- URL: https://github.com/ha1fstack/react-router-topbar
- Owner: ha1fstack
- Created: 2024-09-22T14:48:23.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-09-22T16:16:41.000Z (4 months ago)
- Last Synced: 2024-11-19T23:27:35.589Z (2 months ago)
- Topics: react, react-router, topbar, toploader
- Language: TypeScript
- Homepage: https://react-router-topbar.vercel.app/
- Size: 134 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Router Topbar
### Top Loading Bar component for React Router v6, that just works.
- made using [NProgress](https://ricostacruz.com/nprogress/).
- supports **data route with loader**
- supports **future.v7_startTransition**
See the [demo](https://react-router-topbar.vercel.app/) for detail.
[](https://www.npmjs.com/package/react-router-topbar)
[](https://www.npmjs.com/package/react-router-topbar)
## Install
```bash
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.
```js
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import ReactRouterTopbar from "react-router-topbar";
function App() {
return (
);
}
export default App;
const router = createBrowserRouter([
{
path: "/",
element: ,
children: [
...
],
},
]);
function Root() {
return (
<>
...
>
);
}
```
### Default Configuration
If no props are passed to ``, below is the default configuration applied.
```jsx
```
- `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` | `"
"` |
| `zIndex` | `number` | `1600` |
| `showAtBottom` | `boolean` | `false` |
## License
MIT.
Basic structure from [Nextjs Toploader](https://github.com/TheSGJ/nextjs-toploader).