{"_id":"@aunshon/query-router","_rev":"10-97c41cc0a22f382628086db8b3a55298","name":"@aunshon/query-router","dist-tags":{"latest":"1.0.9"},"versions":{"1.0.2":{"name":"@aunshon/query-router","version":"1.0.2","keywords":["react","router","query-based","wordpress"],"author":{"name":"Abul Hasan Aunshon"},"license":"MIT","_id":"@aunshon/query-router@1.0.2","maintainers":[{"name":"aunshon","email":"aunshonhasan@gmail.com"}],"homepage":"https://github.com/Aunshon/aun-query-router#readme","bugs":{"url":"https://github.com/Aunshon/aun-query-router/issues"},"dist":{"shasum":"0d2b6f29a4d2e723df5cf0a246495e3b711b62eb","tarball":"https://registry.npmjs.org/@aunshon/query-router/-/query-router-1.0.2.tgz","fileCount":24,"integrity":"sha512-ZgbZUcqtdm5BCN+A3i8slyt/Fk41FbS1UI4CDHoQoW6+WSC7syl5L596l+OwXMnYvpagcfXVFjSbFu7kU4piuA==","signatures":[{"sig":"MEYCIQDEOp0HPctgzVvfkjOzH+1Nev3IVQrutCMqujEw0HOirgIhAPWgphJEO2if/XzKvIKDr4VfC5TBR2BVeWxOOgq5wcZM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32284},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"96bdf5d8bc748417eaea1dc00639cbadbc173549","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc","clean":"rimraf dist","prepare":"npm run clean && npm run build"},"_npmUser":{"name":"aunshon","email":"aunshonhasan@gmail.com"},"repository":{"url":"git+https://github.com/Aunshon/aun-query-router.git","type":"git"},"_npmVersion":"8.19.3","description":"A query-based router for React applications or WordPress pages","directories":{},"_nodeVersion":"16.19.1","_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","rimraf":"^3.0.2","typescript":"^4.5.0","@types/react":"^18.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/query-router_1.0.2_1728420442960_0.4613478877824184","host":"s3://npm-registry-packages"},"deprecated":"This package has been renamed to react-query-router. Please use the new package name."},"1.0.5":{"name":"@aunshon/query-router","version":"1.0.5","keywords":["react","router","query-based","wordpress"],"author":{"name":"Abul Hasan Aunshon"},"license":"MIT","_id":"@aunshon/query-router@1.0.5","maintainers":[{"name":"aunshon","email":"aunshonhasan@gmail.com"}],"homepage":"https://github.com/Aunshon/aun-query-router#readme","bugs":{"url":"https://github.com/Aunshon/aun-query-router/issues"},"dist":{"shasum":"1ed7cf290cf5fca1caed69d4fc52a7322c5d2bc8","tarball":"https://registry.npmjs.org/@aunshon/query-router/-/query-router-1.0.5.tgz","fileCount":24,"integrity":"sha512-Yn0mpROVu9LZy1S3/EGZudQl9lZYlBG+fq3eXeoljcIxrb3K3c+ykHFVhtnTOkT+X9PLoQVFRG7wx6YF6a8BTQ==","signatures":[{"sig":"MEYCIQC0g0vBJBWpgZ4mxDNZxxJ7QQWiONn53LcJWx0l8/s/1gIhAMdd2q4thB0fcRyNGn3BNZ86VDQqimS81T8FhVELxVR3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32272},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"59be57a57bad49236c92018cc2be1c468cea3979","scripts":{"test":"echo \"Error: no test specified\"","build":"tsc","clean":"rimraf dist","prepare":"npm run clean && npm run build"},"_npmUser":{"name":"aunshon","email":"aunshonhasan@gmail.com"},"repository":{"url":"git+https://github.com/Aunshon/aun-query-router.git","type":"git"},"_npmVersion":"8.19.4","description":"A query-based router for React applications or WordPress pages","directories":{},"_nodeVersion":"16.20.2","_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","rimraf":"^3.0.2","typescript":"^4.5.0","@types/react":"^18.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/query-router_1.0.5_1728421584998_0.34831308368116876","host":"s3://npm-registry-packages"},"deprecated":"This package has been renamed to react-query-router. Please use the new package name."},"1.0.6":{"name":"@aunshon/query-router","version":"1.0.6","keywords":["react","router","query-based","wordpress"],"author":{"name":"Abul Hasan Aunshon"},"license":"MIT","_id":"@aunshon/query-router@1.0.6","maintainers":[{"name":"aunshon","email":"aunshonhasan@gmail.com"}],"homepage":"https://github.com/Aunshon/aun-query-router#readme","bugs":{"url":"https://github.com/Aunshon/aun-query-router/issues"},"dist":{"shasum":"61f4d94edaa5a89b5cbcb324d3edbec4fa4d7453","tarball":"https://registry.npmjs.org/@aunshon/query-router/-/query-router-1.0.6.tgz","fileCount":13,"integrity":"sha512-1Oi2yMrKQKq045wuGeRjLX+hJ0cGHLbZTe8j3CAXw1XS+9YabqDz4yhXK4estxf4XpoGuiHZAhqSDeGQe50s3w==","signatures":[{"sig":"MEUCIFb8tpwjjOLWb4LDDvgoAJpigzepHDyupm5gGCgtQ5C/AiEA4lYfQTvg8b81KqkvP7TCtgm3M1tYrA0FsmQxhFrNIsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18651},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"67de385c6aad47b9c16dc9d76cf899fa4310bbba","scripts":{"test":"echo \"Error: no test specified\"","build":"tsc","clean":"rimraf dist","prepare":"npm run clean && npm run build"},"_npmUser":{"name":"aunshon","email":"aunshonhasan@gmail.com"},"repository":{"url":"git+https://github.com/Aunshon/aun-query-router.git","type":"git"},"_npmVersion":"10.8.2","description":"A query-based router for React applications or WordPress pages","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","rimraf":"^3.0.2","typescript":"^4.5.0","@types/react":"^18.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/query-router_1.0.6_1728422116925_0.7492349728873826","host":"s3://npm-registry-packages"},"deprecated":"This package has been renamed to react-query-router. Please use the new package name."},"1.0.7":{"name":"@aunshon/query-router","version":"1.0.7","keywords":["react","router","query-based","wordpress"],"author":{"name":"Abul Hasan Aunshon"},"license":"MIT","_id":"@aunshon/query-router@1.0.7","maintainers":[{"name":"aunshon","email":"aunshonhasan@gmail.com"}],"homepage":"https://github.com/Aunshon/aun-query-router#readme","bugs":{"url":"https://github.com/Aunshon/aun-query-router/issues"},"dist":{"shasum":"ac0b460d992fd2efb64961a9e6741a71ef1173de","tarball":"https://registry.npmjs.org/@aunshon/query-router/-/query-router-1.0.7.tgz","fileCount":14,"integrity":"sha512-Y6H9/hkGtUK+Xf/UCMz1WA910YS/i/7UaPrMuLp9sYAzFcyV+MfsUeq0sAXeGIzv/aEewZ/wgsmvmPr/5rWjDg==","signatures":[{"sig":"MEQCICh2UzLwJ7oFReBTNLdFxq/Jcl17d/9DXkjlKN1xG0j7AiANsBqbMjw7b5hdLLZWrUATYI7JppbRxKgVCNLuO4IjbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18793},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a7f00249d98fabcbf50c2d3cba654327eb1b6cba","scripts":{"test":"echo \"Error: no test specified\"","build":"tsc","clean":"rimraf dist","prepare":"npm run clean && npm run build"},"_npmUser":{"name":"aunshon","email":"aunshonhasan@gmail.com"},"repository":{"url":"git+https://github.com/Aunshon/aun-query-router.git","type":"git"},"_npmVersion":"10.8.2","description":"A query-based router for React applications or WordPress pages","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","rimraf":"^3.0.2","typescript":"^4.5.0","@types/react":"^18.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/query-router_1.0.7_1728422832978_0.7443675201171616","host":"s3://npm-registry-packages"},"deprecated":"This package has been renamed to react-query-router. Please use the new package name."},"1.0.8":{"name":"@aunshon/query-router","version":"1.0.8","keywords":["react","router","query-based","wordpress"],"author":{"name":"Abul Hasan Aunshon"},"license":"MIT","_id":"@aunshon/query-router@1.0.8","maintainers":[{"name":"aunshon","email":"aunshonhasan@gmail.com"}],"homepage":"https://github.com/Aunshon/aun-query-router#readme","bugs":{"url":"https://github.com/Aunshon/aun-query-router/issues"},"dist":{"shasum":"1717b1459cbe83446bdadb063b75e53b2b535aad","tarball":"https://registry.npmjs.org/@aunshon/query-router/-/query-router-1.0.8.tgz","fileCount":16,"integrity":"sha512-B8tgnn0mY6mYeF8p9f0p90MQEzyj6w1M066qeZv4Qag47ErUyU8tOCBXGjNf5X9YsFAU1UxwvHulucnbfhBE6A==","signatures":[{"sig":"MEQCIBH5BLovnn9aiYC6BGRxsMpXtEpliu65muvr7NwHjA4hAiBOA3UCjZzcsuTR6Lg+C25hEDKaepbcnlRrJNpxWOplfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17002},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"fef9dd67a9666b410b5865f805d71c13f8f4ab7a","scripts":{"test":"echo \"Error: no test specified\"","build":"tsc","clean":"rimraf dist","prepare":"npm run clean && npm run build"},"_npmUser":{"name":"aunshon","email":"aunshonhasan@gmail.com"},"repository":{"url":"git+https://github.com/Aunshon/aun-query-router.git","type":"git"},"_npmVersion":"10.8.2","description":"A query-based router for React applications or WordPress pages","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","rimraf":"^3.0.2","typescript":"^4.5.0","@types/react":"^18.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/query-router_1.0.8_1728457037864_0.954294423194854","host":"s3://npm-registry-packages"},"deprecated":"This package has been renamed to react-query-router. Please use the new package name."},"1.0.9":{"name":"@aunshon/query-router","version":"1.0.9","keywords":["react","router","query-based","wordpress"],"author":{"name":"Abul Hasan Aunshon"},"license":"MIT","_id":"@aunshon/query-router@1.0.9","maintainers":[{"name":"aunshon","email":"aunshonhasan@gmail.com"}],"homepage":"https://github.com/Aunshon/aun-query-router#readme","bugs":{"url":"https://github.com/Aunshon/aun-query-router/issues"},"dist":{"shasum":"d3a0082041e7f78f59484d060aefa99a28586a59","tarball":"https://registry.npmjs.org/@aunshon/query-router/-/query-router-1.0.9.tgz","fileCount":16,"integrity":"sha512-ZMx5ZvMZD+ZPRPByrnRyVn04IR/HbinO+MvmItjW7LmYIRZgsPTF0j6mfNbvycVvziUY18lqU0N3seyCy1IvYA==","signatures":[{"sig":"MEUCIQCcMaxsej9lJO9N+H1pwbBiS9auWEYQ4bryRaiqiSLAhgIgPDs+LfmRgSxNMswjHQKMKlv4uVgM2hxPZDAx6j9/qcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20268},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d57df327ea853c7848380bebf062ca52d555109b","scripts":{"test":"echo \"Error: no test specified\"","build":"tsc","clean":"rimraf dist","prepare":"npm run clean && npm run build"},"_npmUser":{"name":"aunshon","email":"aunshonhasan@gmail.com"},"repository":{"url":"git+https://github.com/Aunshon/aun-query-router.git","type":"git"},"_npmVersion":"10.8.2","description":"A query-based router for React applications or WordPress pages","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","rimraf":"^3.0.2","typescript":"^4.5.0","@types/react":"^18.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/query-router_1.0.9_1728479672109_0.5689003830084645","host":"s3://npm-registry-packages"},"deprecated":"This package has been renamed to react-query-router. Please use the new package name."}},"time":{"created":"2024-10-08T20:47:22.841Z","modified":"2024-10-12T10:16:39.381Z","1.0.0":"2024-10-08T20:07:44.413Z","1.0.1":"2024-10-08T20:18:17.155Z","1.0.2":"2024-10-08T20:47:23.154Z","1.0.5":"2024-10-08T21:06:25.228Z","1.0.6":"2024-10-08T21:15:17.140Z","1.0.7":"2024-10-08T21:27:13.200Z","1.0.8":"2024-10-09T06:57:18.075Z","1.0.9":"2024-10-09T13:14:32.395Z"},"bugs":{"url":"https://github.com/Aunshon/aun-query-router/issues"},"author":{"name":"Abul Hasan Aunshon"},"license":"MIT","homepage":"https://github.com/Aunshon/aun-query-router#readme","keywords":["react","router","query-based","wordpress"],"repository":{"url":"git+https://github.com/Aunshon/aun-query-router.git","type":"git"},"description":"A query-based router for React applications or WordPress pages","maintainers":[{"name":"aunshon","email":"aunshonhasan@gmail.com"}],"readme":"# @aunshon/query-router\n\nA query-based router for WordPress pages or any React application.\n\n## Installation\n\n```bash\nnpm install @aunshon/query-router\n```\n\n## Usage\n\n```jsx\nimport { Routes, Route, QueryLink } from \"@aunshon/query-router\";\n\nconst About = () => <div><h3>About Page</h3></div>;\nconst Contact = () => <div><h3>Contact Page</h3></div>;\nconst Home = () => <div><h3>Home Page</h3></div>;\nconst AboutDetail = (props) => {\n  console.log(props);\n  \n  return <div><h3>About Detail</h3></div>;\n};\nconst NumberComponent = (props) => {\n  console.log(props);\n\n  return <div><h3>Number component</h3></div>;\n};\nconst NoRouteFound = () => <div><h3>404 not found</h3></div>;\n\nconst Navigation = () => (\n  <nav>\n    <ul>\n      <li><QueryLink param=\"path\" to=\"\">Home</QueryLink></li>\n      <li><QueryLink param=\"path\" to=\"about\">About</QueryLink></li>\n      <li><QueryLink param=\"path\" to=\"about/23\">About/23</QueryLink></li>\n      <li><QueryLink param=\"path\" to=\"contact\">Contact</QueryLink></li>\n      <li><QueryLink param=\"path\" to=\"45\">45 (any number)</QueryLink></li>\n      <li><QueryLink param=\"path\" to=\"nomathc\" >No match found param</QueryLink></li>\n    </ul>\n  </nav>\n);\n\n\nfunction App() {\n\n  return (\n    <div>\n      <Navigation />\n\n      <Routes paramWatcher=\"path\">\n        <Route index element={<Home />} />\n        <Route param=\"about\" element={<About />} />\n        <Route param=\"^about/(?<id>\\d+)$\" regex element={<AboutDetail />} />\n        <Route param=\"^(?<id>\\d+)$\" regex element={<NumberComponent />} />\n        <Route param=\"contact\" element={<Contact />} />\n        <Route param=\"*\" element={<NoRouteFound />} />\n      </Routes>\n    </div>\n  );\n}\n\nexport default App;\n```\n\n## API\n\n### useQueryNavigation\n\nThe `useQueryNavigation` hook provides methods for manipulating the URL query parameters.\n\n```jsx\nimport { useQueryNavigation } from '@aunshon/query-router';\n\nfunction MyComponent() {\n  const { navigateLink, removeLinkParam, replaceLink } = useQueryNavigation();\n\n  // Usage examples...\n}\n```\n\n#### navigateLink\n\nAdds or updates query parameters in the URL.\n\n```jsx\nnavigateLink({ user: '1', page: '2' });\n// Updates URL to: ?user=1&page=2\n```\n\n#### removeLinkParam\n\nRemoves specified query parameters from the URL.\n\n```jsx\nremoveLinkParam(['user', 'page']);\n// Removes 'user' and 'page' parameters from the URL\n```\n\n#### replaceLink\n\nReplaces all query parameters in the URL based on a callback function.\n\n```jsx\nreplaceLink((currentParams) => ({\n  ...currentParams,\n  newParam: 'value',\n  updatedParam: 'newValue'\n}));\n// Replaces or adds 'newParam' and 'updatedParam' while keeping other existing parameters\n```\n\n#### getAllParams\n\nReturns all parameters, query string and `URLSearchParams` instance in the URL.\n\n```jsx\nimport { RouterLocation } from '@aunshon/query-router';\n\nfunction MyComponent() {\n  const { getAllParams } = RouterLocation();\n  const { currentParams, searchParams, searchString } = getAllParams();\n\n  console.log('Current params:', currentParams);\n  console.log('Search string:', searchString);\n  console.log('Search params, URLSearchParams :', searchParams);\n\n  // Rest of the component...\n}\n```\n\n### useWatchParam\n\nThe `useWatchParam` hook allows you to watch for changes in specific query parameters.\n\n```jsx\nimport { useWatchParam } from '@aunshon/query-router';\n\nfunction MyComponent() {\n  const params = useWatchParam(['user', 'page']);\n\n  useEffect(() => {\n    console.log('User changed:', params.user);\n    console.log('Page changed:', params.page);\n  }, [params]);\n\n  // Rest of the component...\n}\n```\n\n## Components\n\n### QueryLink\n\nCreates a link that updates query parameters when clicked.\n\n```jsx\n<QueryLink param=\"path\" to=\"about\">About</QueryLink>\n```\n\n### Routes\n\nWrapper component for defining routes based on query parameters.\n\n```jsx\n<Routes paramWatcher=\"path\">\n  {/* Route components go here */}\n</Routes>\n```\n\n### Route\n\nDefines a single route within the Routes component.\n\n```jsx\n<Route param=\"about\" element={<About />} />\n```\n## Route Regex Support\n\nThis routing supports regex-based routing, allowing for more flexible and powerful route matching. This feature enables you to create routes that match complex patterns and extract parameters from the URL.\n\n### Using Regex Routes\n\nTo use a regex-based route, add the `regex` prop to your `Route` component and provide a regular expression as the `param` value.\n\n```jsx\n<Route param=\"^about/(?<id>\\d+)$\" regex element={<AboutDetail />} />\n```\n\nIn this example:\n- `^` asserts the start of the string\n- `about/` matches the literal string \"about/\"\n- `(?<id>\\d+)` is a named capture group that matches one or more digits\n- `$` asserts the end of the string\n\nThis route will match paths like \"/about/123\" or \"/about/456789\", but not \"/about/abc\".\n\n### Accessing Captured Parameters\n\nWhen a regex route matches, any named capture groups in the regex are passed to the component as props. You can access these in your component like this:\n\n```jsx\nconst AboutDetail = ({ params }) => {\n  return <div>About Detail for ID: {params.id}</div>;\n};\n```\n\n### Example: Numbers-Only Route\n\nHere's an example of a route that only accepts numeric paths:\n\n```jsx\n<Route param=\"^(?<id>\\d+)$\" regex element={<NumberComponent />} />\n\nconst NumberComponent = ({ params }) => {\n  return <div>Numeric Route: {params.id}</div>;\n};\n```\n\nThis route will:\n- Match: \"/123\", \"/456789\"\n- Not match: \"/abc\", \"/123abc\", \"/\"\n\n### Tips for Using Regex Routes\n\n1. Always use the `^` and `$` anchors to match the entire path.\n2. Use named capture groups `(?<name>...)` to extract parameters.\n3. Be careful with greedy quantifiers (`*`, `+`) as they might match more than intended.\n4. Test your regex thoroughly to ensure it matches and captures as expected.\n\n### Performance Considerations\n\nWhile regex routes offer great flexibility, they can be slower than simple string matching for very high traffic applications. Use them judiciously, especially if you have a large number of routes.\n\n## License\n\nMIT","readmeFilename":"README.md"}