{"id":24511707,"url":"https://github.com/devnax/react-pagex","last_synced_at":"2026-06-25T12:31:29.821Z","repository":{"id":57967034,"uuid":"528957356","full_name":"devnax/react-pagex","owner":"devnax","description":null,"archived":false,"fork":false,"pushed_at":"2022-09-19T20:37:32.000Z","size":1444,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T11:26:06.225Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devnax.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}},"created_at":"2022-08-25T17:43:14.000Z","updated_at":"2025-02-09T09:21:49.000Z","dependencies_parsed_at":"2022-09-20T12:26:44.841Z","dependency_job_id":null,"html_url":"https://github.com/devnax/react-pagex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Freact-pagex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Freact-pagex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Freact-pagex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Freact-pagex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devnax","download_url":"https://codeload.github.com/devnax/react-pagex/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243713388,"owners_count":20335566,"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":[],"created_at":"2025-01-22T00:40:40.977Z","updated_at":"2026-06-25T12:31:29.800Z","avatar_url":"https://github.com/devnax.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## React PageX\n\nThe `react-pagex` is a very tiny library for manage react app routes. It's very simple to use.\n\n\n\n### Availabel Hooks and Components\n\n```js\nimport {\n  Link, \n  useRoute, \n  useGroup, \n  useQuery,\n  Navigate, \n  Route, \n  Routes, \n  Parser\n} from 'react-pagex'\n\n```\n\n\n\n\n### Useg\n\n```jsx\nimport {Link, Routes, Route} from 'react-pagex'\n\n\nconst Home = ({params, query}) =\u003e {\n  return \u003ch1\u003eHome\u003c/h1\u003e\n}\nconst About = ({params, query}) =\u003e {\n  return \u003ch1\u003eAbout\u003c/h1\u003e\n}\n\nconst Contact = ({params, query}) =\u003e {\n  return \u003ch1\u003eContact\u003c/h1\u003e\n}\n\nexport default () =\u003e {\n   return (\n      \u003cRoutes\n        onError={() =\u003e {\n\n        }}\n      \u003e\n         \u003cul\u003e\n            \u003cli\u003e\u003cLink label=\"Home\" path=\"/\" /\u003e\u003c/li\u003e\n            \u003cli\u003e\u003cLink label=\"Service\" path=\"/service\" /\u003e\u003c/li\u003e\n            \u003cli\u003e\u003cLink label=\"Contact\" path=\"/contact\" /\u003e\u003c/li\u003e\n            \u003cli\u003e\u003cLink label=\"Unknown\" path=\"/wrong-path\" /\u003e\u003c/li\u003e\n         \u003c/ul\u003e\n         \u003cRoute path='/' render={Home} /\u003e\n         \u003cRoute path='/about' render={About} /\u003e\n         \u003cRoute path='/service' render={Service} /\u003e\n         \u003cRoute path='/contact' render={Contact} /\u003e\n      \u003c/Routes\u003e\n   )\n}\n\n```\n\n### Link Component\n\n```jsx\n\nconst LinkComp = ({children, ...props}) =\u003e \u003cdiv\u003e{children}\u003c/div\u003e\n\n\u003cLink \n  label=\"Home\"\n  href=\"/\"\n  noHref={true}\n  component={LinkComp}\n/\u003e\n\n// With Children\n\u003cLink \n  href=\"/\"\n  noHref={true}\n  component={LinkComp}\n\u003eChildren\u003c/Link\u003e\n\n```\n\n### Routes Component\n`Routes` used the useGroup hook\n```jsx\n\u003cRoutes \n  basepath=\"\"\n  onError={() =\u003e {\n\n  }}\n  onFound={(route) =\u003e {\n\n  }}\n\u003e\nchildren\n\u003c/Routes\u003e\n\n```\n\n### Route Component\n`Route` used the useRoute hook\n```jsx\n\u003cRoute \n  path=\"posts/:id\"\n  render={Render}\n/\u003e\n\n```\n\n\n\n### Navigate\nNavigate Page without `Link` Component\n\n```js\nimport {Navigate} from 'react-pagex'\n\nNavigate.go('/path')\nNavigate.back()\nNavigate.forward()\nNavigate.reload()\n\n```\n\n\n\n### useGroup\n\n```js\nconst App = () =\u003e {\n   useGroup({\n    basepath: '',\n    onError: () =\u003e {},\n    onFound: () =\u003e {},\n  })\n  \n  return \u003c\u003eapp\u003c/\u003e\n}\n\n```\n\n\n### useRoute\n\n```js\nconst App = () =\u003e {\n  const params = useRoute('/path')\n  if(params){\n    return \u003cdiv\u003eRoute Match\u003c/div\u003e \n  }\n  return \u003c\u003e\u003c/\u003e\n}\n\n```\n\n### useQuery\nJust get the current route query with an object\n\n\n### Parser\nThe `Parser` is a module for match and parse the route\n```js\nconst params = Parser.isMatch('/path/:id', 'compare path')\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnax%2Freact-pagex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevnax%2Freact-pagex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnax%2Freact-pagex/lists"}