{"_id":"@carlosjunod/react-full-page-scroller","_rev":"4-aad5753c087398ba1b2138610366761b","name":"@carlosjunod/react-full-page-scroller","dist-tags":{"latest":"1.2.1"},"versions":{"1.0.2":{"name":"@carlosjunod/react-full-page-scroller","version":"1.0.2","keywords":["react","fullpage","scroller","framer-motion","carousel"],"author":{"name":"Carlos Junod","email":"carlos@junod.cl"},"license":"MIT","_id":"@carlosjunod/react-full-page-scroller@1.0.2","maintainers":[{"name":"carlosjunod","email":"carlos@junod.cl"}],"homepage":"https://github.com/carlosjunod/react-full-page-scroller#readme","bugs":{"url":"https://github.com/carlosjunod/react-full-page-scroller/issues"},"dist":{"shasum":"b96b9431d9da9f6893d2726370251d8e8e3f4b5b","tarball":"https://registry.npmjs.org/@carlosjunod/react-full-page-scroller/-/react-full-page-scroller-1.0.2.tgz","fileCount":4,"integrity":"sha512-03ZGdR8tkyKBfHNeOOxOEnOVYbuiLZy8hekmqhm53ZD1UhD8UvenXjbrsUYL36SAK5qsA3JyvsB+Cw2eQoI0Cw==","signatures":[{"sig":"MEYCIQDmWkqUwdZMhLVrvnBp3nMGSnivdDkMShM8mkITfJhdvAIhAIIP3uF+BzItGE/le4/yMTnpRzuzWBa74sv1o1UKmuYi","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17409},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=14"},"gitHead":"e4992fa0aae31ac8a27d83c80ee907424f493e7b","scripts":{"test":"echo \"No tests yet\" && exit 0","build":"rollup -c","prepare":"npm run build","prepublishOnly":"npm run build"},"_npmUser":{"name":"carlosjunod","actor":{"name":"carlosjunod","type":"user","email":"carlos@junod.cl"},"email":"carlos@junod.cl"},"repository":{"url":"git+https://github.com/carlosjunod/react-full-page-scroller.git","type":"git"},"_npmVersion":"10.8.2","description":"A React component for full-viewport animated scrolling (vertical & horizontal) using Framer Motion","directories":{},"_nodeVersion":"20.19.3","_hasShrinkwrap":false,"devDependencies":{"rollup":"^3.0.0","@babel/core":"^7.0.0","@babel/preset-react":"^7.0.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-full-page-scroller_1.0.2_1750921228529_0.052955234152678665","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@carlosjunod/react-full-page-scroller","version":"1.1.0","keywords":["react","fullpage","scroller","framer-motion","carousel"],"author":{"name":"Carlos Junod","email":"carlos@junod.cl"},"license":"MIT","_id":"@carlosjunod/react-full-page-scroller@1.1.0","maintainers":[{"name":"carlosjunod","email":"carlos@junod.cl"}],"homepage":"https://github.com/carlosjunod/react-full-page-scroller#readme","bugs":{"url":"https://github.com/carlosjunod/react-full-page-scroller/issues"},"dist":{"shasum":"ae5d85465b92608ce7320b8df853ce15a7cf8eb1","tarball":"https://registry.npmjs.org/@carlosjunod/react-full-page-scroller/-/react-full-page-scroller-1.1.0.tgz","fileCount":4,"integrity":"sha512-jdOltBPQUOJ2StJ6GbU04kMPgqGF8e8ppEhXEenDFi+SfvwPkjgsxC2ed3Fk18tXItrrL8gan28U/1O3tFPbAw==","signatures":[{"sig":"MEUCICXculgJW7ihUQtfRFBeLuOmrBIIs5Gj9UmKgJCqXq+PAiEAtu4WRpmWwV2KKI+JnAX0o8gLexHRvPWTw02IGfcCv/E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20043},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=14"},"gitHead":"3e6db9a3a304c007812e1febd9a9bdaa019010ac","scripts":{"test":"echo \"No tests yet\" && exit 0","build":"rollup -c","prepare":"npm run build","prepublishOnly":"npm run build"},"_npmUser":{"name":"carlosjunod","actor":{"name":"carlosjunod","type":"user","email":"carlos@junod.cl"},"email":"carlos@junod.cl"},"repository":{"url":"git+https://github.com/carlosjunod/react-full-page-scroller.git","type":"git"},"_npmVersion":"10.8.2","description":"A React component for full-viewport animated scrolling (vertical & horizontal) using Framer Motion","directories":{},"_nodeVersion":"20.18.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"^3.0.0","prop-types":"^15.8.1","@babel/core":"^7.0.0","@babel/preset-react":"^7.0.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-full-page-scroller_1.1.0_1751782491919_0.16587537600487878","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@carlosjunod/react-full-page-scroller","version":"1.2.0","keywords":["react","fullpage","scroller","framer-motion","carousel"],"author":{"name":"Carlos Junod","email":"carlos@junod.cl"},"license":"MIT","_id":"@carlosjunod/react-full-page-scroller@1.2.0","maintainers":[{"name":"carlosjunod","email":"carlos@junod.cl"}],"homepage":"https://github.com/carlosjunod/react-full-page-scroller#readme","bugs":{"url":"https://github.com/carlosjunod/react-full-page-scroller/issues"},"dist":{"shasum":"a5feeda87d444622cdcbc48c1be1d67cc435d8e2","tarball":"https://registry.npmjs.org/@carlosjunod/react-full-page-scroller/-/react-full-page-scroller-1.2.0.tgz","fileCount":4,"integrity":"sha512-WxiQgpvxfPkZNHPhZsTFrPXvf4g88+uzE3mYEPMJJM30LuSBxYJzL5J4enmc6Pkq8TVcmsjeGzn4Fnrvm2wjRA==","signatures":[{"sig":"MEUCIFrMdq49GEK6m8wo3/fUrWRJUK19rMFkImLWMegQrX9nAiEA+mpgzqAS+g/rPae9XYJ6I7Q1o9+krp7XUo+a+OJqkh4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20043},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=14"},"gitHead":"81f77e41dbe62ac333f83046feb8b4c8b3c61f21","scripts":{"test":"echo \"No tests yet\" && exit 0","build":"rollup -c","prepare":"npm run build","prepublishOnly":"npm run build"},"_npmUser":{"name":"carlosjunod","actor":{"name":"carlosjunod","type":"user","email":"carlos@junod.cl"},"email":"carlos@junod.cl"},"repository":{"url":"git+https://github.com/carlosjunod/react-full-page-scroller.git","type":"git"},"_npmVersion":"10.8.2","description":"A React component for full-viewport animated scrolling (vertical & horizontal) using Framer Motion","directories":{},"_nodeVersion":"20.18.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"^3.0.0","prop-types":"^15.8.1","@babel/core":"^7.0.0","@babel/preset-react":"^7.0.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-full-page-scroller_1.2.0_1751865315795_0.7950295177464353","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@carlosjunod/react-full-page-scroller","version":"1.2.1","description":"A React component for full-viewport animated scrolling (vertical & horizontal) using Framer Motion","main":"dist/index.cjs.js","module":"dist/index.esm.js","exports":{"require":"./dist/index.cjs.js","import":"./dist/index.esm.js"},"types":"dist/index.d.ts","scripts":{"build":"rollup -c","prepare":"npm run build","prepublishOnly":"npm run build","test":"echo \"No tests yet\" && exit 0"},"repository":{"type":"git","url":"git+https://github.com/carlosjunod/react-full-page-scroller.git"},"bugs":{"url":"https://github.com/carlosjunod/react-full-page-scroller/issues"},"type":"module","homepage":"https://github.com/carlosjunod/react-full-page-scroller#readme","keywords":["react","fullpage","scroller","framer-motion","carousel"],"author":{"name":"Carlos Junod","email":"carlos@junod.cl"},"license":"MIT","peerDependencies":{"framer-motion":">=4.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@babel/core":"^7.0.0","@babel/preset-react":"^7.0.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.0","prop-types":"^15.8.1","rollup":"^3.0.0"},"engines":{"node":">=14"},"_id":"@carlosjunod/react-full-page-scroller@1.2.1","gitHead":"1877c76f400dff7184867f64334b65a34fb12e54","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-LUPhNqyZ0WHO0cz4PokSrjEmApOMYT1f0uekSd4hcjJQ6acv3JvA8hehElt9oqefrmJMBEVYseSP1udehWH6Kw==","shasum":"24f527e6b24b33c3bd198cf26cb38ed2e34318f7","tarball":"https://registry.npmjs.org/@carlosjunod/react-full-page-scroller/-/react-full-page-scroller-1.2.1.tgz","fileCount":4,"unpackedSize":20137,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCh8Z2L3rW3BtH1zcJJQme9RBvQK7/0kr3UjnKmK6/69wIhAKcIOOPc5n6hCML21IdO3OIdv57PFtLTrvFs2UnOG491"}]},"_npmUser":{"name":"carlosjunod","email":"carlos@junod.cl","actor":{"name":"carlosjunod","email":"carlos@junod.cl","type":"user"}},"directories":{},"maintainers":[{"name":"carlosjunod","email":"carlos@junod.cl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-full-page-scroller_1.2.1_1751865853919_0.21639849996756877"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-26T07:00:28.418Z","modified":"2025-07-07T05:24:14.251Z","1.0.2":"2025-06-26T07:00:28.678Z","1.1.0":"2025-07-06T06:14:52.144Z","1.2.0":"2025-07-07T05:15:15.967Z","1.2.1":"2025-07-07T05:24:14.081Z"},"bugs":{"url":"https://github.com/carlosjunod/react-full-page-scroller/issues"},"author":{"name":"Carlos Junod","email":"carlos@junod.cl"},"license":"MIT","homepage":"https://github.com/carlosjunod/react-full-page-scroller#readme","keywords":["react","fullpage","scroller","framer-motion","carousel"],"repository":{"type":"git","url":"git+https://github.com/carlosjunod/react-full-page-scroller.git"},"description":"A React component for full-viewport animated scrolling (vertical & horizontal) using Framer Motion","maintainers":[{"name":"carlosjunod","email":"carlos@junod.cl"}],"readme":"# @carlosjunod/react-full-page-scroller\n\nA fully-featured React component for “full-page” scrollable slides. Supports vertical or horizontal scroll\n(mouse wheel or touch swipe), animated transitions via Framer Motion, SSR-safe usage, optional dot\nnavigation controls, and a React Context API for programmatic control.\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @carlosjunod/react-full-page-scroller\n# or\nyarn add @carlosjunod/react-full-page-scroller\n```\n\n---\n\n## 🚀 Basic Usage\n\n```jsx\nimport React from 'react';\nimport FullPageScroller from '@carlosjunod/react-full-page-scroller';\n\nimport SectionOne from './SectionOne';\nimport SectionTwo from './SectionTwo';\nimport SectionThree from './SectionThree';\n\nexport default function App() {\n  return (\n    <FullPageScroller>\n      <SectionOne />\n      <SectionTwo />\n      <SectionThree />\n    </FullPageScroller>\n  );\n}\n```\n\n---\n\n## ⚙️ Full-Feature Example\n\nThis demonstrates:\n\n1. Context-based navigation from anywhere  \n2. Dot controls on the **right**  \n3. Horizontal scroll  \n4. Custom dot component  \n5. Scroll callbacks  \n6. SSR safety  \n\n```jsx\nimport React from 'react';\nimport {\n  FullPageScroller,\n  FullPageScrollerProvider,\n  useFullPageScroller\n} from '@carlosjunod/react-full-page-scroller';\n\n// Custom dot component\nfunction MyDot({ active }) {\n  return (\n    <div\n      style={{\n        width: active ? 14 : 8,\n        height: active ? 14 : 8,\n        borderRadius: '50%',\n        background: active ? '#ff007f' : '#aaa'\n      }}\n    />\n  );\n}\n\nfunction NavBar() {\n  const { next, prev, goTo, currentPage } = useFullPageScroller();\n  return (\n    <div style={{ position: 'fixed', top: 20, left: 20, zIndex: 100 }}>\n      <button onClick={prev}>◀ Prev</button>\n      <button onClick={next}>Next ▶</button>\n      <button onClick={() => goTo(2)}>Go to 3</button>\n      <span style={{ marginLeft: 10 }}>Page: {currentPage + 1}</span>\n    </div>\n  );\n}\n\nexport default function App() {\n  return (\n    <FullPageScrollerProvider\n      axis=\"horizontal\"\n      threshold={150}\n      duration={1}\n      control\n      controlPos=\"right\"\n      dotComponent={MyDot}\n      onScrollStart={(i) => console.log('Starting scroll to', i)}\n      onScroll={(i) => console.log('Threshold met for', i)}\n      onScrollEnd={(i) => console.log('Finished scroll to', i)}\n      fallback={<div style={{ padding: 20, textAlign: 'center' }}>Loading...</div>}\n    >\n      <NavBar />\n      <FullPageScroller>\n        <SectionOne />\n        <SectionTwo />\n        <SectionThree />\n      </FullPageScroller>\n    </FullPageScrollerProvider>\n  );\n}\n```\n\n---\n\n## 🔧 API & Props\n\n### `FullPageScroller` Props\n\n| Prop             | Type                                   | Default     | Description                                                                          |\n| ---------------- | -------------------------------------- | ----------- | ------------------------------------------------------------------------------------ |\n| `axis`           | `'vertical'` \\| `'horizontal'`         | `'vertical'`| Scroll direction                                                                     |\n| `threshold`      | `number`                               | `100`       | Wheel/pointer delta threshold to trigger page change                                 |\n| `duration`       | `number`                               | `0.8`       | Animation duration in seconds                                                        |\n| `control`        | `boolean`                              | `true`      | Show/hide navigation dots                                                            |\n| `controlPos`     | `'top'` \\| `'right'` \\| `'bottom'` \\| `'left'` | `'right'`       | Position of dot controls                                                             |\n| `dotComponent`   | `({ active, index }) => ReactNode`     | —           | Custom component for dots                                                            |\n| `onScrollStart`  | `(newPage) => void`                    | —           | Called when scroll threshold begins                                                  |\n| `onScroll`       | `(newPage) => void`                    | —           | Called once threshold is passed                                                      |\n| `onScrollEnd`    | `(newPage) => void`                    | —           | Called after animation completes                                                     |\n| `fallback`       | `ReactNode`                            | `null`      | Suspense fallback for lazy-loaded slides                                             |\n| `enabled`        | `boolean`                              | `true`      | When `false`, disables full-page scrolling and allows normal scrolling behavior       |\n\n### Context API\n\nWrap with provider:\n\n```jsx\n<FullPageScrollerProvider {...same props as FullPageScroller}>\n  <YourNav />\n  <FullPageScroller>…</FullPageScroller>\n  <OtherComponent />\n</FullPageScrollerProvider>\n```\n\nUse hook:\n\n```js\nconst { next, prev, goTo, currentPage } = useFullPageScroller();\n```\n\n---\n\n## 📦 Building & Publishing\n\n```bash\nnpm install\nnpm run build\nnpm publish --access public\n```\n\n---\n","readmeFilename":"README.md"}