{"_id":"@cantoo/navigation","_rev":"5-52626209b266f534f0a42e721618cfd2","name":"@cantoo/navigation","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@cantoo/navigation","version":"1.0.0","keywords":["react","navigation","web"],"author":{"name":"fbillioud"},"license":"ISC","_id":"@cantoo/navigation@1.0.0","maintainers":[{"name":"sharcoux","email":"f.billioud@gmail.com"},{"name":"ribeirofmatheus","email":"matheus_f.ribeiro@hotmail.com"},{"name":"matheusrdsantos","email":"matheus.r.d.s10@hotmail.com"},{"name":"gabrielnsd","email":"gabrielnsdantas@gmail.com"},{"name":"nicodemos234","email":"nicodemos54324@gmail.com"}],"dist":{"shasum":"0b62f9d1f18c61cfde8e78381397f44cef86a337","tarball":"https://registry.npmjs.org/@cantoo/navigation/-/navigation-1.0.0.tgz","fileCount":2,"integrity":"sha512-XHrTH7+v2G4dSCq+7yOo+QqRwZqK6D0uoA90ABrlHompDR74TUcQ9eDwSYL1fpSP51Q7UsdnJ98lsmgS00yk/A==","signatures":[{"sig":"MEUCIQCFmYP4WK1blRuw5OJ/fKoEoJpYPZJvkitS7jZhE5jZqAIgYmGvQfEUUc0PsFrQwYDcOJ3T/vXWtNajwCXI1EyZ8qQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6317},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"c8e6bba92cd0bbfbf34bf3630bc92684ee1ced9c","scripts":{"build":"rimraf dist && tsc -p tsconfig.json","clean":"rimraf dist","release":"release-it"},"_npmUser":{"name":"sharcoux","email":"f.billioud@gmail.com"},"_npmVersion":"10.9.3","description":"React Universal Navigation (pure React version)","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.13.1"},"_npmOperationalInternal":{"tmp":"tmp/navigation_1.0.0_1761332660671_0.8529193458651247","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@cantoo/navigation","version":"1.0.1","keywords":["react","navigation","web"],"author":{"name":"fbillioud"},"license":"ISC","_id":"@cantoo/navigation@1.0.1","maintainers":[{"name":"sharcoux","email":"f.billioud@gmail.com"},{"name":"ribeirofmatheus","email":"matheus_f.ribeiro@hotmail.com"},{"name":"matheusrdsantos","email":"matheus.r.d.s10@hotmail.com"},{"name":"gabrielnsd","email":"gabrielnsdantas@gmail.com"},{"name":"nicodemos234","email":"nicodemos54324@gmail.com"}],"homepage":"https://github.com/Sharcoux/react-unavigation#readme","bugs":{"url":"https://github.com/Sharcoux/react-unavigation/issues"},"dist":{"shasum":"81dc7ca2c79f57e29c87be21c7ee111ab22a7f1f","tarball":"https://registry.npmjs.org/@cantoo/navigation/-/navigation-1.0.1.tgz","fileCount":5,"integrity":"sha512-VHY+cyD6wDDQGN8Dw5o89CAu7TYRADVWdgxDgHgDShttZXbzX0B7TT+krytOT91LMk5f9Y8/fBBjZUchDxkfww==","signatures":[{"sig":"MEQCIAnbe3L0hb/ovijigz2ZXZhr1Re8OfNMZ2vlmZzCHTMXAiA2sYhKtqoW2MwNB+tjfzwz8roJlLBlmVL9u0YRqn+QBw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19008},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"1fac7c18cd3208f01c9cdb82a1eb65fe8713a03f","scripts":{"build":"rimraf dist && tsc -p tsconfig.json","clean":"rimraf dist","release":"npm run build && release-it"},"_npmUser":{"name":"sharcoux","email":"f.billioud@gmail.com"},"repository":{"url":"git+ssh://git@github.com/Sharcoux/react-unavigation.git","type":"git"},"_npmVersion":"10.9.3","description":"React Universal Navigation (pure React version)","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.13.1"},"_npmOperationalInternal":{"tmp":"tmp/navigation_1.0.1_1761333153213_0.6253281912379183","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@cantoo/navigation","version":"1.0.2","keywords":["react","navigation","web"],"author":{"name":"fbillioud"},"license":"ISC","_id":"@cantoo/navigation@1.0.2","maintainers":[{"name":"sharcoux","email":"f.billioud@gmail.com"},{"name":"ribeirofmatheus","email":"matheus_f.ribeiro@hotmail.com"},{"name":"matheusrdsantos","email":"matheus.r.d.s10@hotmail.com"},{"name":"gabrielnsd","email":"gabrielnsdantas@gmail.com"},{"name":"nicodemos234","email":"nicodemos54324@gmail.com"}],"homepage":"https://github.com/Sharcoux/react-unavigation#readme","bugs":{"url":"https://github.com/Sharcoux/react-unavigation/issues"},"dist":{"shasum":"cd4e8f3956a5c0baa289b8c89e6467864b2d3753","tarball":"https://registry.npmjs.org/@cantoo/navigation/-/navigation-1.0.2.tgz","fileCount":5,"integrity":"sha512-j7mEpHvmX1kipW7FHdI1IZvpth58HRnYvrINI0O7NAL4mQZzVG/aaos02x4Xsn82kbtlDdgqwlRTET3jGPTGDw==","signatures":[{"sig":"MEUCIQCHIDjrDsAOff/sMalCj5X50s6VuijoRQpiRNKU/rkUfgIgWqH3TIvSuAEQxUAVpBl9pdcxMkM+39yJFNeHpsY7BRU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19004},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"4770c21ea5e70f95e5a41edf32019d1d480d4f83","scripts":{"build":"rimraf dist && tsc -p tsconfig.json","clean":"rimraf dist","release":"npm run build && release-it"},"_npmUser":{"name":"sharcoux","email":"f.billioud@gmail.com"},"repository":{"url":"git+ssh://git@github.com/Sharcoux/react-unavigation.git","type":"git"},"_npmVersion":"10.9.3","description":"React Universal Navigation (pure React version)","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.13.1"},"_npmOperationalInternal":{"tmp":"tmp/navigation_1.0.2_1761933123207_0.6401333453395281","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@cantoo/navigation","version":"1.0.3","keywords":["react","navigation","web"],"author":{"name":"fbillioud"},"license":"ISC","_id":"@cantoo/navigation@1.0.3","maintainers":[{"name":"sharcoux","email":"f.billioud@gmail.com"},{"name":"ribeirofmatheus","email":"matheus_f.ribeiro@hotmail.com"},{"name":"matheusrdsantos","email":"matheus.r.d.s10@hotmail.com"},{"name":"gabrielnsd","email":"gabrielnsdantas@gmail.com"},{"name":"nicodemos234","email":"nicodemos54324@gmail.com"}],"homepage":"https://github.com/Sharcoux/react-unavigation#readme","bugs":{"url":"https://github.com/Sharcoux/react-unavigation/issues"},"dist":{"shasum":"34bc50e2e59450163a7acaab4978b85f2f8f75d1","tarball":"https://registry.npmjs.org/@cantoo/navigation/-/navigation-1.0.3.tgz","fileCount":6,"integrity":"sha512-luG46Ehi8m8gXx1+7FeVLWe26EYNBdGqLp05wdDZPwni1xIRU5BJmCmzTB6clltf4FU4FlDU2KhakL4p/mB9ww==","signatures":[{"sig":"MEUCIBaahAM5+V0yU0jN/X8vynzhHL5gY4RM+VIGWTQyOsIeAiEAigSCYMR0KCJO41UZt4slCypysFZaTwozN5PtetS+a0s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21360},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"09402b710e5e05884199a9dc7acaaa30e363ee92","scripts":{"build":"rimraf dist && tsc -p tsconfig.json","clean":"rimraf dist","release":"npm run build && release-it"},"_npmUser":{"name":"sharcoux","email":"f.billioud@gmail.com"},"repository":{"url":"git+ssh://git@github.com/Sharcoux/react-unavigation.git","type":"git"},"_npmVersion":"10.9.3","description":"React Universal Navigation (pure React version)","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.13.1"},"_npmOperationalInternal":{"tmp":"tmp/navigation_1.0.3_1762791966367_0.597438591045732","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-10-24T19:04:20.572Z","modified":"2026-05-05T16:34:07.727Z","1.0.0":"2025-10-24T19:04:20.861Z","1.0.1":"2025-10-24T19:12:33.403Z","1.0.2":"2025-10-31T17:52:03.380Z","1.0.3":"2025-11-10T16:26:06.581Z"},"bugs":{"url":"https://github.com/Sharcoux/react-unavigation/issues"},"author":{"name":"fbillioud"},"license":"ISC","homepage":"https://github.com/Sharcoux/react-unavigation#readme","keywords":["react","navigation","web"],"repository":{"url":"git+ssh://git@github.com/Sharcoux/react-unavigation.git","type":"git"},"description":"React Universal Navigation (pure React version)","maintainers":[{"email":"f.billioud@gmail.com","name":"sharcoux"},{"email":"matheus_f.ribeiro@hotmail.com","name":"ribeirofmatheus"},{"email":"matheus.r.d.s10@hotmail.com","name":"matheusrdsantos"},{"email":"gabrielnsdantas@gmail.com","name":"gabrielnsd"},{"email":"felipe@cantoo.fr","name":"felipecantoo"},{"email":"nicodemos54324@gmail.com","name":"nicodemos234"}],"readme":"# React Universal Navigation (React)\n\nPure React implementation of the universal navigation component.\n\n## Install\n\n```bash\nnpm i @cantoo/navigation\n```\n\nPeer dependencies:\n```json\n{\n  \"react\": \">=16.13.1\"\n}\n```\n\n## Why?\n\nNavigation is often modeled after browser history, but React components should depend only on the props they receive. This component provides a simple, declarative way to navigate between screens in React by switching named children.\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport Navigation, { Slide, asSlide } from '@cantoo/navigation'\n\nconst Page = ({ name, color, children }) => (\n  <div style={{ backgroundColor: color, padding: 20, height: '100%' }}>\n    <h2>Page {name}</h2>\n    {children}\n  </div>\n)\n\nconst Page2 = asSlide(Page, '2')\n\nexport default function App() {\n  const [active, setActive] = React.useState('0')\n  return (\n    <div style={{ height: '100dvh', width: '100dvw' }}>\n      <div style={{ display: 'flex', gap: 10 }}>\n        {['0', '1', '2'].map(i => (\n          <button key={i} onClick={() => setActive(i)}>Navigate to {i}</button>\n        ))}\n      </div>\n      <div style={{ height: '100%', overflow: 'hidden' }}>\n        <Navigation active={active} duration={500}>\n          <Slide name=\"0\" Component={Page} color=\"tomato\">\n            <p>This is page 0 using the pure React implementation</p>\n          </Slide>\n          <Slide name=\"1\" Component={Page} color=\"royalblue\">\n            <p>This is page 1</p>\n          </Slide>\n          <Page2 name=\"2\" color=\"seagreen\">\n            <p>This is page 2 using the asSlide HOC</p>\n          </Page2>\n        </Navigation>\n      </div>\n    </div>\n  )\n}\n```\n\n## API\n\n- `Navigation` props:\n  - `active: string` – name of the active slide to display\n  - `duration?: number` – transition duration in ms (default: 500)\n  - `children` – only children with a `name` prop are considered slides\n\n- Helpers:\n  - `Slide` – wrapper to add a `name` prop to any component\n  - `asSlide(Component, defaultName)` – HOC version of `Slide`\n\n## TypeScript\n\nWhen your children components do not declare a `name` prop, use `Slide` or `asSlide` to satisfy typing while keeping the same runtime behavior.\n\n## Notes\n\n- Every child used as a slide must receive a `name` prop.\n- If `active` does not match any child, the first child is displayed and a warning is logged.\n\n\n","readmeFilename":"README.md"}