{"id":15043454,"url":"https://github.com/forinda/react-router-map","last_synced_at":"2025-04-14T20:52:43.859Z","repository":{"id":62825892,"uuid":"562517958","full_name":"forinda/react-router-map","owner":"forinda","description":"A declarative routing library that maps your routes and uses the react-router-dom library so that you focus on the logic rather than route configuration. It supports nested routing and react-router-dom v6+","archived":false,"fork":false,"pushed_at":"2024-01-30T16:09:53.000Z","size":827,"stargazers_count":10,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T09:04:45.852Z","etag":null,"topics":["nodejs","react","react-router","react-router-dom","react-router-dom-v6","routing","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/forinda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License","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}},"created_at":"2022-11-06T15:55:01.000Z","updated_at":"2024-02-28T12:19:38.000Z","dependencies_parsed_at":"2024-01-30T17:45:13.457Z","dependency_job_id":"2749d32c-a0b1-459d-b943-6e0e1708032c","html_url":"https://github.com/forinda/react-router-map","commit_stats":{"total_commits":59,"total_committers":4,"mean_commits":14.75,"dds":"0.13559322033898302","last_synced_commit":"0a0492b47ac833ec46d126450df4902741673626"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forinda%2Freact-router-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forinda%2Freact-router-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forinda%2Freact-router-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forinda%2Freact-router-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forinda","download_url":"https://codeload.github.com/forinda/react-router-map/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248961017,"owners_count":21189990,"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","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":["nodejs","react","react-router","react-router-dom","react-router-dom-v6","routing","typescript"],"created_at":"2024-09-24T20:49:04.565Z","updated_at":"2025-04-14T20:52:43.832Z","avatar_url":"https://github.com/forinda.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## `react-router-map`\n\n## How to use\n\nInstallation\n\n```sh\n# Pnpm\npnpm install react-router-map\n# Npm\nnpm install react-router-map\n#Yarn\nyarn add react-router-map\n```\n\nTo load it in your component ensure `react-router-dom` is installed\n\nSupports both `esm` and `commonjs`\n\nFor versions `\u003e1.0.0`\n\n- Removal of `hasChildren` prop and check for the children directly without the `boolean` field\n- Addition of `Layout` prop and `extensible` layout structure in the routes level for more complex routing layout wrappers\n\n```jsx\nimport MapRouter from 'react-router-map'\nimport { IRouteProps } from 'react-router-map/dist/types' //Types of route for esm modules\n\nconst Child1 = () =\u003e \u003cdiv\u003eChild 1\u003c/div\u003e\nconst Child2 = () =\u003e \u003cdiv\u003eChild 2\u003c/div\u003e\nconst Parent1 = () =\u003e \u003cdiv\u003eChild 2\u003c/div\u003e\nconst Parent1 = () =\u003e \u003cdiv\u003eChild 2\u003c/div\u003e\nconst routes: IRouteProps[] = [\n  {\n    pathName: 'Home',\n    urlPath: '/',\n    Component: \u003cParent1 /\u003e,\n  },\n  {\n    pathName: 'Admin',\n    urlPath: '/admin',\n    Component: \u003cParent2 /\u003e,\n    nestedComponents: [\n      {\n        pathName: 'Dashboard',\n        urlPath: '/admin',\n        Component: \u003cChild1 /\u003e,\n      },\n      {\n        pathName: 'Users',\n        urlPath: '/admin/users',\n        Component: \u003cChild2 /\u003e,\n      },\n    ],\n  },\n]\nconst Comp = () =\u003e (\n  \u003cdiv\u003e\n    \u003cMapRouter routes={routes} topScroll browserRouter /\u003e\n  \u003c/div\u003e\n)\n```\n\nIf you are using a layout component for your app that runs acrosss all components then you can just plug it in\n\n```jsx\ntype Lmap = (\n  LayoutContainer: React.FC\u003c{\n    children: JSX.Element,\n  }\u003e,\n  Component: React.FC | React.ElementType,\n) =\u003e JSX.Element\n\nconst layoutWrap: Lmap = (\n  LayoutContainer: React.FC\u003c{ children: JSX.Element }\u003e,\n  Component: React.FC | React.ElementType,\n) =\u003e {\n  return (\n    \u003cLayoutContainer\u003e\n      \u003cComponent /\u003e\n    \u003c/LayoutContainer\u003e\n  )\n}\nconst routes: IRouteProps[] = [\n  {\n    Component: layoutWrap(BaseLayout, Homepage),\n    pathName: 'Home',\n    urlPath: '/',\n  },\n  {\n    Component: layoutWrap(BaseLayout, AboutPage),\n    pathName: 'About',\n    urlPath: '/about',\n  },\n  {\n    Component: layoutWrap(BaseLayout, ContactPage),\n    pathName: 'Contact',\n    urlPath: '/contact',\n  },\n  {\n    Component: layoutWrap(BaseLayout, NotFound),\n    pathName: 'NotFound',\n    urlPath: '*',\n  },\n]\nconst ComponentPage = () =\u003e \u003cMapRouter routes={routes} topScroll /\u003e\n```\n\nFor versions `\u003c=1.0.0`\n\n```jsx\nimport { MapRouter } from 'react-router-map'\nimport { IRouteProps } from 'react-router-map/dist/types' //Types of route for esm modules\n\nconst Child1 = () =\u003e \u003cdiv\u003eChild 1\u003c/div\u003e\nconst Child2 = () =\u003e \u003cdiv\u003eChild 2\u003c/div\u003e\nconst Parent1 = () =\u003e \u003cdiv\u003eChild 2\u003c/div\u003e\nconst Parent1 = () =\u003e \u003cdiv\u003eChild 2\u003c/div\u003e\nconst routes: IRouteProps[] = [\n  {\n    pathName: 'Home',\n    urlPath: '/',\n    Component: \u003cParent1 /\u003e,\n    hasChildren: false,\n  },\n  {\n    pathName: 'Admin',\n    urlPath: '/admin',\n    Component: \u003cParent2 /\u003e,\n    hasChildren: true,\n    nestedComponents: [\n      {\n        pathName: 'Dashboard',\n        urlPath: '/admin',\n        Component: \u003cChild1 /\u003e,\n        hasChildren: false,\n      },\n      {\n        pathName: 'Users',\n        urlPath: '/admin/users',\n        Component: \u003cChild2 /\u003e,\n        hasChildren: false,\n      },\n    ],\n  },\n]\nconst Comp = () =\u003e (\n  \u003cdiv\u003e\n    \u003cMapRouter routes={routes} enableTopScroll={false} browserRouter={false} /\u003e\n  \u003c/div\u003e\n)\n```\n\nSample layout structure\n\n```sh\n- Hompage # Hopepage render Parent 1\n- admin # The component wrapper where you pass your \u003cOutlet/\u003e\n  - Dashboard # Render dashboard\n  - Users # Render users\n  - Sumary # Render Dashboard summary\n```\n\nSample Dashboard component\n\n```jsx\nconst Admin = () =\u003e (\n  \u003cdiv\u003e\n    \u003cdiv\u003e\n      \u003ch1\u003eDashboard\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003cOutlet /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n)\n```\n\nThe code above implements `HashRouter` and `BrowserRouter` for you and you just need to install the package and `react-router-dom`\nFeatures\n\n- Optional topscroll on page navigation\n- Enable BrowserRouter or disable( Defaults to `HashRouter`)\n- Nested layouts (You just have to to supply any level of nesting in your Application in the `nestedComponents` property)\n  Upcoming features\n- Layout support\n\n# Try it out on Stackblitz\n\n## \u003ca href=\"https://stackblitz.com/edit/react-ts-nriwyu?ctl=1\u0026devToolsHeight=33\u0026embed=1\u0026file=pages/Homepage.tsx\u0026theme=dark\" target=\"_black\"\u003eStackblitz live\u003c/a\u003e\n\nIn the mean time we can inject a wrapper in the route `Component` property\n\nSupports nested layouts\n![Dashboard layout](./assets/nested.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforinda%2Freact-router-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforinda%2Freact-router-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforinda%2Freact-router-map/lists"}