{"id":48217437,"url":"https://github.com/cin12211/react-magic-router","last_synced_at":"2026-04-04T19:00:58.839Z","repository":{"id":250662520,"uuid":"835057115","full_name":"cin12211/react-magic-router","owner":"cin12211","description":"A library that provides type-safe configuration for your router  🚒🔥🪄","archived":false,"fork":false,"pushed_at":"2024-08-01T08:14:44.000Z","size":26,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-20T07:30:36.057Z","etag":null,"topics":["react","react-router-dom","react-router-v6","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-magic-router","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/cin12211.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-29T04:34:15.000Z","updated_at":"2024-08-10T09:15:52.000Z","dependencies_parsed_at":"2024-08-01T09:53:19.019Z","dependency_job_id":null,"html_url":"https://github.com/cin12211/react-magic-router","commit_stats":null,"previous_names":["cin12211/react-magic-router"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/cin12211/react-magic-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cin12211%2Freact-magic-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cin12211%2Freact-magic-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cin12211%2Freact-magic-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cin12211%2Freact-magic-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cin12211","download_url":"https://codeload.github.com/cin12211/react-magic-router/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cin12211%2Freact-magic-router/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31409471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-dom","react-router-v6","typescript"],"created_at":"2026-04-04T19:00:38.629Z","updated_at":"2026-04-04T19:00:58.828Z","avatar_url":"https://github.com/cin12211.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# React magic router  \u003cimg src=\"https://i.pinimg.com/564x/42/ca/c8/42cac8d68009c8d2fcc54366a9eea97a.jpg\" width=\"30\" alt=\"Nest Logo\" /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-magic-router\" target=\"blank\"\u003e\n  \u003cimg src=\"https://i.pinimg.com/564x/42/ca/c8/42cac8d68009c8d2fcc54366a9eea97a.jpg\" width=\"120\" alt=\"React Magic Router Logo\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-magic-router\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-magic-router.svg\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-magic-router\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/react-magic-router.svg\" alt=\"NPM Downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n`react-magic-router` is a library designed to simplify and enhance the use of `react-router-dom` v6. It offers an easy setup process, type safety, and auto-completion for your routes, making your routing configuration clear and maintainable.\n\n\n### Features\n- Type Safety: Ensures that your route paths and parameters are type-checked.\n- Auto-complete: Provides auto-completion for your route paths.\n- Easy Integration: Integrate with your existing routing setup without breaking your code.\n- Supports react-router-dom v6: Currently supports react-router-dom v6 with plans to support v5 and v4 very soon\n\n### Installation\n\n```sh\nnpm install react-magic-router\n```\n\n### Set up\n\nAdd type and declare global type\n\n```ts\nimport type { MappedGlobalRouter, RouteObjectMagic } from 'react-magic-router';\n\nconst PUBLIC_ROUTES = [\n  {\n    path: 'forgot-password',\n    element: \u003cForgotPasswordPage /\u003e,\n    query: 'email'\n  },\n  {\n    path: 'verify-otp',\n    element: \u003cVerifyOtpPage /\u003e,\n    query: 'email\u0026type' // \u003c-- your query 'email,type'\n  },\n  {\n    path: ':id/profile', // \u003c-- your param ':id'\n    element: \u003cProfilePage /\u003e,\n  }\n  // ... other routes\n] as const satisfies RouteObjectMagic[]; // \u003c-- Add this\n\nexport const routes = [\n  {\n    path: '/',\n    children: [\n      {\n        path: '/auth',\n        element: \u003cPublicLayout /\u003e,\n        children: PUBLIC_ROUTES,\n      },\n      // ...other routes\n    ],\n  },\n] as const satisfies RouteObjectMagic[]; // \u003c-- Add this\n\n// This declaration type is required\ndeclare module 'react-magic-router' { \n  type GlobalMagicRouter = MappedGlobalRouter\u003ctypeof routes\u003e;\n}\n\n-------------- root app ----------------\nimport { RouterProvider, createBrowserRouter } from 'react-router-dom';\nimport {routes} from './your-path'\n\nconst router = createBrowserRouter(routes); // the same way with you setup react router v6\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  \u003cReact.StrictMode\u003e\n    \u003cRouterProvider router={router} /\u003e\n  \u003c/React.StrictMode\u003e,\n);\n```\n\n### Usage\n\nTo navigate\n```tsx\nimport { useMagicRouter } from './path-to-your-hook';\n\nfunction MyComponent() {\n  const { navigate } = useMagicRouter();\n \n  const handleNavigationToVerifyOtp = () =\u003e {\n    navigate({\n      path: '/auth/verify-otp', // \u003c-- this will show autocomplete path for you choose\n      query: { email: '..@gmail.com',type:\"...\" } // \u003c-- this type will take when you define query of path '/auth/verify-otp' is 'email\u0026type' parse to { email: string , type: string } type\n    });\n  };\n\n  const handleNavigationToProfile =(id:string)=\u003e{\n    navigate({\n      path: '/auth/:id/profile',\n      param: {\n        id\n      } // \u003c--- this param will extract form '/auth/:id/profile' parse to { id: string } type\n    });\n  }\n\n  return (\n    \u003cdiv\u003e\n        ...\n    \u003c/div\u003e\n  );\n}\n```\n\nTo get param\n```tsx\nimport { useMagicRouter } from './path-to-your-hook';\n\nfunction MyComponent() {\n  const { query } = useMagicRouter('/auth/verify-otp');\n  // query will have { email: string , type: string } type\n\n  const { params } = useMagicRouter('/auth/:id/profile');\n  // params will have { id: string } type\n\n  return (\n    \u003cdiv\u003e\n        ...\n    \u003c/div\u003e\n  );\n}\n```\n\n### API\n\n```ts\nimport type { RouteObject } from \"react-router-dom\";\n\n// RouteObjectMagic is extra type of RouteObject\ntype RouteObjectMagic = {\n  children?: RouteObjectMagic[];\n  query?: string;\n} \u0026 DeepReadonly\u003cOmit\u003cRouteObject, \"children\"\u003e\u003e;\n\n// query will is string but this require format \n// query = 'email' -\u003e { email: string}\n// query = 'email\u0026otp' -\u003e { email: string , otp: string}\n// query = 'email\u0026otp\u0026...' -\u003e { email: string, otp: string, ...}\n```\n\n\n## Limitations\n\n- **No JSX Support for Nested Routes**: Currently does not support nested routes configured with JSX.\n- **react-router-dom v5 and v4**: Support for these versions is coming soon.\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request on [GitHub](https://github.com/cin12211/react-magic-router).\n\n\n## License\n\nThis project is licensed under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcin12211%2Freact-magic-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcin12211%2Freact-magic-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcin12211%2Freact-magic-router/lists"}