{"_id":"09-react-router","_rev":"3-28866ac31247285101fd1ae407cd921e","name":"09-react-router","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"09-react-router","version":"0.0.1","type":"module","main":"lib/index.js","scripts":{"dev":"vite","build":"vite build","lint":"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepare":"swc src/*.jsx --ignore src/pages -d lib","test":"vitest","test:ui":"vitest --ui"},"dependencies":{"path-to-regexp":"6.2.1","react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@swc/cli":"^0.1.62","@swc/core":"^1.3.74","@testing-library/react":"^14.0.0","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@vitejs/plugin-react-swc":"^3.3.2","@vitest/ui":"^0.34.1","eslint":"^8.45.0","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","happy-dom":"^10.7.0","vite":"^4.4.5","vitest":"^0.34.1"},"gitHead":"a1c2b20f27ceded4aaeb0e1fe86de0c6ba8a6125","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","_id":"09-react-router@0.0.1","_nodeVersion":"19.3.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-YdmQR32FyDCbFwYq00UaPkJPyMhFQ8UT3yfHtb8oYWQQAsuVanZr5zNKVTov05MMmuru3qgPYfGmJYK+09O5tw==","shasum":"d5073acae47b59c1b986aa0b426a0f942276192a","tarball":"https://registry.npmjs.org/09-react-router/-/09-react-router-0.0.1.tgz","fileCount":19,"unpackedSize":10246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJ7SQSBzIcJu2bZ3L3n6csJVQmZcSbJcLc5/zbTVemygIhAPuZyA2s5+K22GmGSNBfmIBtsSE2UKthPFRvPQp2kuIq"}]},"_npmUser":{"name":"regum","email":"abdiasejr@gmail.com"},"directories":{},"maintainers":[{"name":"regum","email":"abdiasejr@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/09-react-router_0.0.1_1691256657844_0.834616040625074"},"_hasShrinkwrap":false},"0.0.2":{"name":"09-react-router","version":"0.0.2","type":"module","main":"lib/index.js","scripts":{"dev":"vite","build":"vite build","lint":"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepare":"swc src/*.jsx --ignore src/pages -d lib","test":"vitest","test:ui":"vitest --ui"},"dependencies":{"path-to-regexp":"6.2.1","react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@swc/cli":"^0.1.62","@swc/core":"^1.3.74","@testing-library/react":"^14.0.0","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@vitejs/plugin-react-swc":"^3.3.2","@vitest/ui":"^0.34.1","eslint":"^8.45.0","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","happy-dom":"^10.7.0","vite":"^4.4.5","vitest":"^0.34.1"},"gitHead":"a1c2b20f27ceded4aaeb0e1fe86de0c6ba8a6125","description":"This npm package provides a custom version of the Router, Route, and Link components for React. These components are designed to be lightweight, flexible, and easy to use, allowing you to handle client-side routing in your React applications efficiently.","_id":"09-react-router@0.0.2","_nodeVersion":"19.3.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-jNdA36FnMKcShQ0E68s0P8h0dXSPZmydoDllR2xFbQMBAmCg64EtzJ6kVRlFbr38WM95g+7j5e+7AvqkP2y+Mw==","shasum":"f5ceb8165fb350c97af061ad4fad34b196907b5f","tarball":"https://registry.npmjs.org/09-react-router/-/09-react-router-0.0.2.tgz","fileCount":19,"unpackedSize":12380,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyAhejyc58vwmLLJiF2Y20cyaJPir8/9jZXU5wIGCiTAiEA3Y9XX9OpPRmU4IUxuV2BJPHDoVJZoKXOPy7dMl6Iphc="}]},"_npmUser":{"name":"regum","email":"abdiasejr@gmail.com"},"directories":{},"maintainers":[{"name":"regum","email":"abdiasejr@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/09-react-router_0.0.2_1691260704256_0.3239386321486333"},"_hasShrinkwrap":false},"0.0.3":{"name":"09-react-router","version":"0.0.3","type":"module","main":"lib/index.js","scripts":{"dev":"vite","build":"vite build","lint":"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepare":"swc src/*.jsx --ignore src/pages -d lib","test":"vitest","test:ui":"vitest --ui"},"dependencies":{"path-to-regexp":"6.2.1","react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@swc/cli":"^0.1.62","@swc/core":"^1.3.74","@testing-library/react":"^14.0.0","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@vitejs/plugin-react-swc":"^3.3.2","@vitest/ui":"^0.34.1","eslint":"^8.45.0","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","happy-dom":"^10.7.0","vite":"^4.4.5","vitest":"^0.34.1"},"license":"MIT","keywords":["react","jsx","router"],"gitHead":"a1c2b20f27ceded4aaeb0e1fe86de0c6ba8a6125","description":"This npm package provides a custom version of the Router, Route, and Link components for React. These components are designed to be lightweight, flexible, and easy to use, allowing you to handle client-side routing in your React applications efficiently.","_id":"09-react-router@0.0.3","_nodeVersion":"19.3.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-7bv4Zjoj2SrWjH+cL0pDhJo3s/N6YlWsRuLVfoqf3i27nrFu6QNu0BrfoqSgBqPA/9HNndeTSFYkF70S4MllkA==","shasum":"8c4f947f5b59b4c011b2c88a8130687f76d47e58","tarball":"https://registry.npmjs.org/09-react-router/-/09-react-router-0.0.3.tgz","fileCount":19,"unpackedSize":12637,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjZxTGfZfIEd/XLMP68gLob21KxiqWPLOhV/BhBzL3ZwIgXeNDtCqmehaIctrrX+uGENmX22pG4IYv4b4eGLxc/x4="}]},"_npmUser":{"name":"regum","email":"abdiasejr@gmail.com"},"directories":{},"maintainers":[{"name":"regum","email":"abdiasejr@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/09-react-router_0.0.3_1691261124346_0.21538675194986623"},"_hasShrinkwrap":false},"0.0.4":{"name":"09-react-router","version":"0.0.4","type":"module","main":"lib/index.js","scripts":{"dev":"vite","build":"vite build","lint":"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepare":"swc src/*.jsx --ignore src/pages -d lib","test":"vitest","test:ui":"vitest --ui"},"dependencies":{"path-to-regexp":"6.2.1","react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@swc/cli":"^0.1.62","@swc/core":"^1.3.74","@testing-library/react":"^14.0.0","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@vitejs/plugin-react-swc":"^3.3.2","@vitest/ui":"^0.34.1","eslint":"^8.45.0","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","happy-dom":"^10.7.0","vite":"^4.4.5","vitest":"^0.34.1"},"license":"MIT","keywords":["react","jsx","router"],"gitHead":"a1c2b20f27ceded4aaeb0e1fe86de0c6ba8a6125","description":"This npm package provides a custom version of the Router, Route, and Link components for React. These components are designed to be lightweight, flexible, and easy to use, allowing you to handle client-side routing in your React applications efficiently.","_id":"09-react-router@0.0.4","_nodeVersion":"19.3.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-x686c2gS3E+IeOoVi9uKg4wXjtT78qhd6iUv++OiTnvfJhFhINIiHrNZ9bjSVGZbMw5f7HijGksyv8CLibrn3w==","shasum":"f00b28efd5df5d6dd7d016f57a565d38b6fcb653","tarball":"https://registry.npmjs.org/09-react-router/-/09-react-router-0.0.4.tgz","fileCount":19,"unpackedSize":13615,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoeeULFXdyd60bYWnRGjpr1cWzgA+/E+OQ3WpnMIM+DQIgGfvry4jOYo9+vQnO9iAqZAl2rkn2HxSCvpuXFS6rziw="}]},"_npmUser":{"name":"regum","email":"abdiasejr@gmail.com"},"directories":{},"maintainers":[{"name":"regum","email":"abdiasejr@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/09-react-router_0.0.4_1691263192420_0.8210712516136021"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-05T17:30:57.839Z","0.0.1":"2023-08-05T17:30:57.983Z","modified":"2023-08-05T19:19:52.699Z","0.0.2":"2023-08-05T18:38:24.476Z","0.0.3":"2023-08-05T18:45:24.487Z","0.0.4":"2023-08-05T19:19:52.606Z"},"maintainers":[{"name":"regum","email":"abdiasejr@gmail.com"}],"description":"This npm package provides a custom version of the Router, Route, and Link components for React. These components are designed to be lightweight, flexible, and easy to use, allowing you to handle client-side routing in your React applications efficiently.","readme":"# 09 REACT ROUTER\n\nThis npm package provides a custom version of the Router, Route, and Link components for React. These components are designed to be lightweight, flexible, and easy to use, allowing you to handle client-side routing in your React applications efficiently.\n\n## Installation\nYou can install the package using npm or yarn:\n```bash\nnpm i 09-react-router\n\n# or\n\nyarn i 09-react-router\n```\n\n## Usage \nTo use React Router components, follow these steps:\n\n1. Import the components:\n```jsx\nimport { Router, Route, Link } from '09-react-router'\n```\n2. Set up your routing in your applicaction:\n```jsx\n\nexport function App() {\n    return (\n    <Router>\n      <Route\n        path=\"/\"\n        Component={() => {\n          return (\n            <>\n              <h1>Home</h1>\n              <nav>\n                <ul>\n                  <li>\n                    <Link to=\"/\">Home</Link>\n                  </li>\n                  <li>\n                    <Link to=\"/about\">About</Link>\n                  </li>\n                  <li>\n                    <Link to=\"/contact\">Contact</Link>\n                  </li>\n                </ul>\n              </nav>\n            </>\n          );\n        }}\n      />\n      <Route\n        path=\"/about\"\n        Component={() => {\n          return (\n            <>\n              <h1>About</h1>\n              <nav>\n                <ul>\n                  <li>\n                    <Link to=\"/\">Home</Link>\n                  </li>\n                  <li>\n                    <Link to=\"/about\">About</Link>\n                  </li>\n                  <li>\n                    <Link to=\"/contact\">Contact</Link>\n                  </li>\n                </ul>\n              </nav>\n            </>\n          );\n        }}\n      />\n      <Route\n        path=\"/contact\"\n        Component={() => {\n          return (\n            <>\n              <h1>Contact</h1>\n              <nav>\n                <ul>\n                  <li>\n                    <Link to=\"/\">Home</Link>\n                  </li>\n                  <li>\n                    <Link to=\"/about\">About</Link>\n                  </li>\n                  <li>\n                    <Link to=\"/contact\">Contact</Link>\n                  </li>\n                </ul>\n              </nav>\n            </>\n          );\n        }}\n      />\n    </Router>\n    )\n}\n```\n3. Define your route components:\n```jsx\nexport const Home = () => <h2>Home</h2>\nexport const About = () => <h2>About</h2>\nexport const Contact = () => <h2>Contact</h2>\n```\n\n## Components\n### Router\nThe Router component is the top-level component that holds the routing configuration and renders the appropriate Route component based on the current URL.\n\nProps:\n\nroutes: (Optional) Array with optional routes instead of Route component. Example: \n```javascript\nconst routes = [\n    {\n     path: '/',\n     Component: () => <h1>Home</h1>\n    },\n    {\n     path: '/about',\n     Component: () => <h1>About</h1>\n    }\n]\n```\ndefaultComponent: (Optional) Default component to render if any routes or children in Router is founded.\n\n### Route\nThe Route component is used to define a route and render the corresponding component when the URL matches the specified path.\n\nProps:\n\npath (string): The URL path for the route.\ncomponent (function): The React component to render when the URL matches the path.\n\n### Link\nThe Link component is used to create links to navigate between different routes.\n\nProps:\n\nto (string): The URL path to navigate to when the link is clicked.\n\n### Contributing\nContributions are welcome! If you find any issues or have suggestions for improvements, feel free to open a new issue or submit a pull request.\n\nThis is just an npm package to recreate a own router for educational purposes only.","readmeFilename":"README.md","keywords":["react","jsx","router"],"license":"MIT"}