{"id":22933426,"url":"https://github.com/ha1fstack/react-router-topbar","last_synced_at":"2025-08-12T16:32:50.076Z","repository":{"id":263690815,"uuid":"861305123","full_name":"ha1fstack/react-router-topbar","owner":"ha1fstack","description":"A React Router Top Loading Bar component made using nprogress, compatible with React transition and router loaders.","archived":false,"fork":false,"pushed_at":"2024-09-22T16:16:41.000Z","size":137,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-30T00:40:35.991Z","etag":null,"topics":["react","react-router","topbar","toploader"],"latest_commit_sha":null,"homepage":"https://react-router-topbar.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ha1fstack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-22T14:48:23.000Z","updated_at":"2024-11-29T07:12:20.000Z","dependencies_parsed_at":"2024-11-19T23:37:56.549Z","dependency_job_id":null,"html_url":"https://github.com/ha1fstack/react-router-topbar","commit_stats":null,"previous_names":["ha1fstack/react-router-topbar"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ha1fstack/react-router-topbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ha1fstack%2Freact-router-topbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ha1fstack%2Freact-router-topbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ha1fstack%2Freact-router-topbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ha1fstack%2Freact-router-topbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ha1fstack","download_url":"https://codeload.github.com/ha1fstack/react-router-topbar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ha1fstack%2Freact-router-topbar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270097270,"owners_count":24526638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router","topbar","toploader"],"created_at":"2024-12-14T11:29:28.144Z","updated_at":"2025-08-12T16:32:49.699Z","avatar_url":"https://github.com/ha1fstack.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Router Topbar\n\n### Top Loading Bar component for React Router v6, that just works.\n\n- made using [NProgress](https://ricostacruz.com/nprogress/).\n- supports **data route with loader**\n- supports **future.v7_startTransition**\n\nSee the [demo](https://react-router-topbar.vercel.app/) for detail.\n\n[![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge\u0026logo=npm\u0026logoColor=white)](https://www.npmjs.com/package/react-router-topbar)\n[![NPM Downloads](https://img.shields.io/npm/dm/react-router-topbar?\u0026style=flat-square)](https://www.npmjs.com/package/react-router-topbar)\n\n## Install\n\n```bash\nnpm install react-router-topbar\npnpm install react-router-topbar\nyarn add react-router-topbar\n```\n\n## Usage\n\nPlace the topbar component inside your router's root component.\n\n```js\nimport { createBrowserRouter, RouterProvider } from \"react-router-dom\";\nimport ReactRouterTopbar from \"react-router-topbar\";\n\nfunction App() {\n  return (\n    \u003cRouterProvider future={{ v7_startTransition: true }} router={router} /\u003e\n  );\n}\nexport default App;\n\nconst router = createBrowserRouter([\n  {\n    path: \"/\",\n    element: \u003cRoot /\u003e,\n    children: [\n      ...\n    ],\n  },\n]);\n\nfunction Root() {\n  return (\n    \u003c\u003e\n      \u003cReactRouterTopbar /\u003e\n      ...\n    \u003c/\u003e\n  );\n}\n```\n\n### Default Configuration\n\nIf no props are passed to `\u003cReactRouterTopbar /\u003e`, below is the default configuration applied.\n\n```jsx\n\u003cReactRouterTopbar\n  color=\"#2299DD\"\n  initialPosition={0.08}\n  crawlSpeed={200}\n  height={3}\n  crawl={true}\n  showSpinner={true}\n  easing=\"ease\"\n  speed={200}\n  shadow=\"0 0 10px #2299DD,0 0 5px #2299DD\"\n  template='\u003cdiv class=\"bar\" role=\"bar\"\u003e\u003cdiv class=\"peg\"\u003e\u003c/div\u003e\u003c/div\u003e \n  \u003cdiv class=\"spinner\" role=\"spinner\"\u003e\u003cdiv class=\"spinner-icon\"\u003e\u003c/div\u003e\u003c/div\u003e'\n  zIndex={1600}\n  showAtBottom={false}\n/\u003e\n```\n\n- `color`: to change the default color of TopLoader.\n- `initialPosition`: to change initial position for the TopLoader in percentage, : `0.08 = 8%`.\n- `crawlSpeed`: increment delay speed in `ms`.\n- `speed`: animation speed for the TopLoader in `ms`\n- `easing`: animation settings using easing (a CSS easing string).\n- `height`: height of TopLoader in `px`.\n- `crawl`: auto incrementing behavior for the TopLoader.\n- `showSpinner`: to show spinner or not.\n- `shadow`: a smooth shadow for the TopLoader. (set to `false` to disable it)\n- `template`: to include custom HTML attributes for the TopLoader.\n- `zIndex`: defines zIndex for the TopLoader.\n- `showAtBottom`: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)\n\n#### `ReactRouterTopbarProps` (props passed to the TopLoader)\n\n| **Name**          | **Type**          | **Default Value**                                                                                                                       |\n| ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `color`           | `string`          | `\"#2299DD\"`                                                                                                                             |\n| `initialPosition` | `number`          | `0.08`                                                                                                                                  |\n| `crawlSpeed`      | `number`          | `200`                                                                                                                                   |\n| `height`          | `number`          | `3`                                                                                                                                     |\n| `crawl`           | `boolean`         | `true`                                                                                                                                  |\n| `showSpinner`     | `boolean`         | `true`                                                                                                                                  |\n| `easing`          | `string`          | `\"ease\"`                                                                                                                                |\n| `speed`           | `number`          | `200`                                                                                                                                   |\n| `shadow`          | `string \\| false` | `\"0 0 10px #2299DD,0 0 5px #2299DD\"`                                                                                                    |\n| `template`        | `string`          | `\"\u003cdiv class=\"bar\" role=\"bar\"\u003e\u003cdiv class=\"peg\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"spinner\" role=\"spinner\"\u003e\u003cdiv class=\"spinner-icon\"\u003e\u003c/div\u003e\u003c/div\u003e\"` |\n| `zIndex`          | `number`          | `1600`                                                                                                                                  |\n| `showAtBottom`    | `boolean`         | `false`                                                                                                                                 |\n\n## License\n\nMIT.\n\nBasic structure from [Nextjs Toploader](https://github.com/TheSGJ/nextjs-toploader).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fha1fstack%2Freact-router-topbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fha1fstack%2Freact-router-topbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fha1fstack%2Freact-router-topbar/lists"}