{"id":17698568,"url":"https://github.com/iamogbz/react-router-chart","last_synced_at":"2025-10-29T10:23:52.346Z","repository":{"id":32793398,"uuid":"141738190","full_name":"iamogbz/react-router-chart","owner":"iamogbz","description":"🗺️ Static route mapping for React Router","archived":false,"fork":false,"pushed_at":"2024-04-30T11:09:03.000Z","size":64425,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-02T01:37:18.494Z","etag":null,"topics":["es6","javascript","nodejs","react","react-router","react-router-config"],"latest_commit_sha":null,"homepage":"https://ogbizi.com/react-router-chart/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamogbz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-20T17:09:00.000Z","updated_at":"2024-05-07T11:29:28.810Z","dependencies_parsed_at":"2024-05-07T11:28:53.983Z","dependency_job_id":"2d6bec82-69ce-4853-9d6a-307c3346fabb","html_url":"https://github.com/iamogbz/react-router-chart","commit_stats":{"total_commits":1361,"total_committers":7,"mean_commits":"194.42857142857142","dds":0.4327700220426157,"last_synced_commit":"78b44e12c0b464ac6af4368b9fc659e3311090aa"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamogbz%2Freact-router-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamogbz%2Freact-router-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamogbz%2Freact-router-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamogbz%2Freact-router-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamogbz","download_url":"https://codeload.github.com/iamogbz/react-router-chart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222716186,"owners_count":17027697,"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":["es6","javascript","nodejs","react","react-router","react-router-config"],"created_at":"2024-10-24T15:10:09.583Z","updated_at":"2025-10-29T10:23:52.262Z","avatar_url":"https://github.com/iamogbz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Router Chart\n\nDefine your routes only once and reference for use everywhere.\n\n[![NPM Version](https://img.shields.io/npm/v/react-router-chart.svg)](https://www.npmjs.com/package/react-router-chart)\n[![Build Status](https://github.com/iamogbz/react-router-chart/workflows/Build/badge.svg)](https://github.com/iamogbz/react-router-chart/actions?query=workflow%3ABuild)\n[![Coverage Status](https://coveralls.io/repos/github/iamogbz/react-router-chart/badge.svg?branch=main\u0026cache=0)](https://coveralls.io/github/iamogbz/react-router-chart?branch=main)\n[![Dependabot badge](https://badgen.net/github/dependabot/iamogbz/react-router-chart/?icon=dependabot)](https://app.dependabot.com)\n[![Dependencies](https://img.shields.io/librariesio/github/iamogbz/react-router-chart)](https://libraries.io/github/iamogbz/react-router-chart)\n[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/iamogbz/react-router-chart)\n\n## Getting Started\n\n### Install\n\nInclude in your dependencies.\n\n```sh\nnpm install 'react-router-chart'\n```\n\n#### Recommended\n\nUse `React.lazy` and `React.Suspense` to separate component logic from route mapping, by deferring the load of the component to the time of render.\n\n[See more](https://reactjs.org/docs/code-splitting.html#reactlazy)\n\n## Usage\n\n### React Router\n\nYou should understand what [`react-router`](https://reactrouter.com/en/main/routers/picking-a-router) provides out of the box.\n\nThe [`react-router/Route`](https://reactrouter.com/en/main/route/route) supports nesting\nbut does not provide an easy way to reference existing nested routes.\n\nThis is where [`Chart.describe`](#chartdescribe) is useful.\n\n### `Chart.describe`\n\n```js\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport {\n  createBrowserRouter,\n  RouterProvider,\n} from \"react-router-dom\";\nimport { Chart } from 'react-router-chart`;\nimport Root, { rootLoader } from \"./routes/root\";\nimport Team, { teamLoader } from \"./routes/team\";\n\n// Given a react router route config\nconst routeConfigs = [\n  {\n    path: \"/\",\n    element: \u003cRoot /\u003e,\n    loader: rootLoader,\n    children: [\n      {\n        path: \"team\",\n        element: \u003cTeam /\u003e,\n        loader: teamLoader,\n      },\n    ],\n  },\n]\n\n// Generate named route paths\nexport const paths = Chart.describe(routeConfigs);\n\nexport const router = createBrowserRouter(routeConfigs);\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n  \u003cRouterProvider router={router} /\u003e\n);\n```\n\nEasily access any location path by name\n\n```js\npaths.$; // \"/\" - root\npaths.team.$; // \"/team\" - team\n```\n\nCan be reference for link creation in other parts of the app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamogbz%2Freact-router-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamogbz%2Freact-router-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamogbz%2Freact-router-chart/lists"}