{"_id":"@anatine/ionic-react-router","name":"@anatine/ionic-react-router","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@anatine/ionic-react-router","version":"0.0.1","description":"React Router v6 wrapper for @ionic/react","keywords":["ionic","framework","react","mobile","app","hybrid","webapp","cordova","progressive web app","pwa"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/anatine/ionic-modules.git"},"peerDependencies":{"@ionic/react":">=6.1.10","react":">=16.8.6","react-dom":">=16.8.6","react-router":"^6.3.0","react-router-dom":"^6.3.0"},"module":"./index.js","main":"./index.js","type":"module","types":"./index.d.ts","gitHead":"1011aa695e185d3555eee7771b122d1b05ad2199","bugs":{"url":"https://github.com/anatine/ionic-modules/issues"},"homepage":"https://github.com/anatine/ionic-modules#readme","_id":"@anatine/ionic-react-router@0.0.1","_nodeVersion":"16.13.1","_npmVersion":"8.12.2","dist":{"integrity":"sha512-AFzzL73LEXNGcMNeqybfwA1bTLECn0CBRuB4/U7dUzg4lYBuKcYIu7C5mi45TrvCyph6+bBRcqkghCXhozxUaA==","shasum":"b63403234fc1fd494ec4a6be7dfd2d3b7ed5c395","tarball":"https://registry.npmjs.org/@anatine/ionic-react-router/-/ionic-react-router-0.0.1.tgz","fileCount":10,"unpackedSize":103960,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfaCm7YU8LwqG1Rl3PoHaJj1/rwloc/XoFm+ShBDPXSAiAmSz1JBtcXCHOYvRzYHbLdITRbwALXriWT+ZzwZFLcoQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJismHHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOTQ/+Pcdm6ItWtie942QhKm3U2vopT4tOIjSmuC5Lt7B1/YpwR4OJ\r\n9Cz3biS1cle//2ok/ReLgfzZTvDtP4gA+IoQcQ0P33YNbD96FQUjF1bT0LVB\r\npvA7Dp79qxk8LFVm8pFYLNbOBr46i8vJoZgUbEgCGMxOYzEgNZ3qB6AGD000\r\na1nRB1ovxL+NSk+bUIj95SQl5PZyZegV2Ldazez14EhSvWNu0CkeqZsrjibM\r\n0MoNwirzJLFHANshdxvCMyMBjVZspWX36iSccyReQk/eKPdD8EgyoeSzjqQB\r\nTgKoSveg6WX+DVqGvTfmmIBd8uI1Svdf9vazBqveWtrKE/HULU+Bx2hKhcwo\r\nsaVz8qVpPa7f0YVki3hGmqZ1GiiERUOENA23E5AJsa4/0t91tYRW3VqMIWma\r\nPe4TQgUowiQR3/9+HT4dCjWcLI7HXHyE4ULayqnu33dgbg74QWQfPh4JOKyM\r\nrAG7/51Tp/xZP4eODygcNHQ8bX9TCWfxtoUnO/KVR2UBrq6/nn1hy7ltisbV\r\nTSmhIdq1JGcS4THRzwzdh0AtUXR5Nm7U44ff9+eZFHo7exssmbnW9aUsS3J5\r\nMHAFyxPtt2xpmXkIK63teNHl0cpRTp1kzTlyNO4zzd5MK7M88GXBXLIbx1s8\r\n8JteJRZxv5X76EtbXaYcIIBkeW0f1YvA6R8=\r\n=P7LB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anatidae","email":"brianmcbride@outlook.com"},"directories":{},"maintainers":[{"name":"anatidae","email":"brianmcbride@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ionic-react-router_0.0.1_1655857607451_0.36810324267077044"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-22T00:26:47.400Z","0.0.1":"2022-06-22T00:26:47.598Z","modified":"2022-06-22T00:26:47.802Z"},"maintainers":[{"name":"anatidae","email":"brianmcbride@outlook.com"}],"description":"React Router v6 wrapper for @ionic/react","homepage":"https://github.com/anatine/ionic-modules#readme","keywords":["ionic","framework","react","mobile","app","hybrid","webapp","cordova","progressive web app","pwa"],"repository":{"type":"git","url":"git+https://github.com/anatine/ionic-modules.git"},"bugs":{"url":"https://github.com/anatine/ionic-modules/issues"},"license":"MIT","readme":"# @anatine/ionic-react-router\n\n## Description\n\nAn effort to get React Router v6 working with the [Ionic Framework](https://ionicframework.com/docs/react/navigation)\n\n### Background\n\nThe goal of this project is to utilize the most of the React-Router v6 patterns with as minimal abstraction as possible.\n\n`<IonRouterOutlet>` is part of the base `@ionic/react` package creating tight coupling. Internally it wraps all the routes in a component called `<StackManager>`.\n\nIn this lib, `<StackManager>` provides the same functionality and is passed to the `<IonRouteOutlet>` elements via `<IonNavigationContext>` and within the `<StackManager>` is an _outlet_ from `react-router-dom`\n\n### STATUS\n\nThis is not production ready yet.\n\nIt might be that the current `@ionic/react-router` only renders one outlet at a time where at this is following React Router v6 patterns where a nested outlet will render as well as the parent outlet.\n\n---\n\n## Installation\n\n```shell\nnpm install @anatine/ionic-react-router\n```\n\n## Usage\n\n```tsx\nimport {\n  IonPage,\n} from '@ionic/react';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/react/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/react/css/normalize.css';\nimport '@ionic/react/css/structure.css';\nimport '@ionic/react/css/typography.css';\n\n// Routing libs\nimport { IonNavigationContext } from '@anatine/ionic-react-router';\nimport {\n  DataBrowserRouter,\n  Navigate,\n  Route,\n  useLocation,\n} from 'react-router-dom';\n\nsetupIonicReact({\n  mode: 'ios', // or 'md' or undefined\n});\n\nexport function App() {\n\n  return(\n    <DataBrowserRouter\n      fallbackElement={\n        <div>\n          <h1>MISSING</h1>\n        </div>\n      }\n    >\n      <Route\n        element={\n          <IonNavigationContext>\n            <IonRouterOutlet />\n          </IonNavigationContext>\n        }\n      >\n        <Route path=\"/*\" element={<IonPage><h1>Main Page with Navigation</h1></IonPage>} />\n        <Route path=\"/profile/*\" element={<IonPage><h1>Profile</h1></IonPage>} />\n        <Route path=\"/profile/details\" element={<IonPage><h1>Profile Details</h1></IonPage>} />\n      </Route>\n    </DataBrowserRouter>\n  )\n\n}\n\n```\n","readmeFilename":"README.md"}