{"_id":"react-abohook-fullpage","_rev":"36-438cf1b05979fefd534f232d330cdfc9","name":"react-abohook-fullpage","dist-tags":{"latest":"1.2.0"},"versions":{"1.1.5":{"name":"react-abohook-fullpage","version":"1.1.5","keywords":["react","fullpage","parallax","scroll","one page scroll","css transitions"],"author":{"name":"Mostafa Ahmed"},"license":"MIT","_id":"react-abohook-fullpage@1.1.5","maintainers":[{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"}],"dist":{"shasum":"d4f661d34acb1563f5c09eb59047a382054dd77e","tarball":"https://registry.npmjs.org/react-abohook-fullpage/-/react-abohook-fullpage-1.1.5.tgz","fileCount":5,"integrity":"sha512-NCXi/NFmG9MgWxbf/5sixGoqdXuOCnWc/fXGxmIm3JHUkC4V5KtvYaGxejOv0pmTVFS/T9eAvEW+TQ5FX6yifw==","signatures":[{"sig":"MEQCIC6Ls62Ba1CFBQd6tc2OGKjow7SLqCMeYjd3Yb+Rcx0JAiAYCY3Qhg6oHpTbPwYli14vzYRLGZR9c4YyErn16R7UuQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34596},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"}},"gitHead":"f141d0306dbd123efbdef766ea794262a29a04e2","scripts":{"build":"tsc && vite build "},"_npmUser":{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"},"_npmVersion":"11.6.3","description":"React FullPage scroll component with parallax and navigation dots","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7","typescript":"^5","@types/node":"^25","@types/react":"^18","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18","@vitejs/plugin-react":"^5"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-abohook-fullpage_1.1.5_1772351672132_0.9131851593501665","host":"s3://npm-registry-packages-npm-production"}},"1.1.6":{"name":"react-abohook-fullpage","version":"1.1.6","keywords":["react","fullpage","parallax","scroll","one page scroll","css transitions"],"author":{"name":"Mostafa Ahmed"},"license":"MIT","_id":"react-abohook-fullpage@1.1.6","maintainers":[{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"}],"dist":{"shasum":"0a2684fc991d123c86d3b6e47c782f8f328cd6bc","tarball":"https://registry.npmjs.org/react-abohook-fullpage/-/react-abohook-fullpage-1.1.6.tgz","fileCount":5,"integrity":"sha512-FWDJnIhaLuxu0w1uVj56toZpIBhZXCvvEe+l6M2dRJtvscXMKyEHM2R59k/uYiG27teoAAAOKU8m1aC8uHjIIg==","signatures":[{"sig":"MEYCIQCSNAowr0Oe+MX7BtTFN5T7/GrirTG8sJwSxiROkKhSyQIhAN7TZgd88frGv7POx8LWgCv2JjnziNE5O58y3IjoKYXQ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34707},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"}},"gitHead":"8a9560c4a21ec9f7dbb47d341416fc804f102cf8","scripts":{"build":"tsc && vite build "},"_npmUser":{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"},"_npmVersion":"11.6.3","description":"React FullPage scroll component with parallax and navigation dots","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7","typescript":"^5","@types/node":"^25","@types/react":"^18","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18","@vitejs/plugin-react":"^5"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-abohook-fullpage_1.1.6_1773064923216_0.9851593571137884","host":"s3://npm-registry-packages-npm-production"}},"1.1.7":{"name":"react-abohook-fullpage","version":"1.1.7","keywords":["react","fullpage","parallax","scroll","one page scroll","css transitions"],"author":{"name":"Mostafa Ahmed"},"license":"MIT","_id":"react-abohook-fullpage@1.1.7","maintainers":[{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"}],"dist":{"shasum":"c211f6cb1c95686c454b7461e12fe3dd4b6179f1","tarball":"https://registry.npmjs.org/react-abohook-fullpage/-/react-abohook-fullpage-1.1.7.tgz","fileCount":5,"integrity":"sha512-XgeJEP09oenc7pCo4j8aEI/4M/twdNaGrP7eBrNGE1Gm1h58cndZuT6pX5qfDyjkQqHCF9w1bl8BD5WJO5qPYQ==","signatures":[{"sig":"MEQCIBcJc6A/KSuP0dnMFasukcTz8OJ0bBxCQhG+5cCcznj1AiAMFxCio0+Q2t0vdh6rkWk2EzSOnOmRREbtiBpuY/KbaA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34863},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"}},"gitHead":"8a9560c4a21ec9f7dbb47d341416fc804f102cf8","scripts":{"build":"tsc && vite build "},"_npmUser":{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"},"_npmVersion":"11.6.3","description":"React FullPage scroll component with parallax and navigation dots","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7","typescript":"^5","@types/node":"^25","@types/react":"^18","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18","@vitejs/plugin-react":"^5"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-abohook-fullpage_1.1.7_1773065276589_0.6516934828909193","host":"s3://npm-registry-packages-npm-production"}},"1.1.8":{"name":"react-abohook-fullpage","version":"1.1.8","keywords":["react","fullpage","parallax","scroll","one page scroll","css transitions"],"author":{"name":"Mostafa Ahmed"},"license":"MIT","_id":"react-abohook-fullpage@1.1.8","maintainers":[{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"}],"dist":{"shasum":"7e05cac0192eeeae90cda1d56bbd51acd5f7b15b","tarball":"https://registry.npmjs.org/react-abohook-fullpage/-/react-abohook-fullpage-1.1.8.tgz","fileCount":5,"integrity":"sha512-PloijBmG+c8C2A7JqPPe7ixEa2H1/W1tGLQu3V8Z5LAedrnduAACXMmznJa/mOIa+rav5m5cJUn35+y4FrjOHg==","signatures":[{"sig":"MEQCIFdAwNCgW/lIp3CyX4QZi46Rec05HUDO+yauiqdsRyp7AiAyv2tLYmKxlB7SkyWW+4qi47a8vcqaB3nmYrq8ybncWg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34168},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"}},"gitHead":"41d90d25b95721f121f7c9f452a2ec58be784c33","scripts":{"build":"tsc && vite build "},"_npmUser":{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"},"_npmVersion":"11.6.3","description":"React FullPage scroll component with parallax and navigation dots","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7","typescript":"^5","@types/node":"^25","@types/react":"^18","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18","@vitejs/plugin-react":"^5"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-abohook-fullpage_1.1.8_1773319801501_0.534714770483169","host":"s3://npm-registry-packages-npm-production"}},"1.1.9":{"name":"react-abohook-fullpage","version":"1.1.9","keywords":["react","fullpage","parallax","scroll","one page scroll","css transitions"],"author":{"name":"Mostafa Ahmed"},"license":"MIT","_id":"react-abohook-fullpage@1.1.9","maintainers":[{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"}],"dist":{"shasum":"9c4b084eadb1ed51bf7e6b77608fbf728c24cd42","tarball":"https://registry.npmjs.org/react-abohook-fullpage/-/react-abohook-fullpage-1.1.9.tgz","fileCount":5,"integrity":"sha512-K7LNxEI00q+7PpWUp+YOBTGrHOTBzvxBFdT3z+Gnv2t7IvOzTDmnCCkHncDNwt0Dg2a+JEQpdX6HrnAf/YU1OQ==","signatures":[{"sig":"MEUCIQCHNQO8GfvT87PSMG9WrKDct/+zz5QV51rnQ4YCSgtXRgIge2m1L8f84jEHJP4LVy8wwl/k7VH6dnGKCSOvvXaw4r0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34863},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"}},"gitHead":"c228a3d3a35c02ee743a80651a03ad7aa12aa0f5","scripts":{"build":"tsc && vite build "},"_npmUser":{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"},"_npmVersion":"11.6.3","description":"React FullPage scroll component with parallax and navigation dots","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7","typescript":"^5","@types/node":"^25","@types/react":"^18","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18","@vitejs/plugin-react":"^5"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-abohook-fullpage_1.1.9_1773320313720_0.8665795080834049","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"react-abohook-fullpage","version":"1.2.0","description":"React FullPage scroll component with parallax and navigation dots","author":{"name":"Mostafa Ahmed"},"license":"MIT","type":"module","main":"dist/index.cjs.js","module":"dist/index.es.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"}},"scripts":{"build":"tsc && vite build "},"peerDependencies":{"react":">=18","react-dom":">=18"},"sideEffects":false,"keywords":["react","fullpage","parallax","scroll","one page scroll","css transitions"],"devDependencies":{"@types/node":"^25","@types/react":"^18","@types/react-dom":"^18","@vitejs/plugin-react":"^5","typescript":"^5","vite":"^7","vite-plugin-dts":"^4.5.4"},"gitHead":"6c303ea4d2e884a018c843f5c14c8cb75860b477","_id":"react-abohook-fullpage@1.2.0","_nodeVersion":"22.19.0","_npmVersion":"11.6.3","dist":{"integrity":"sha512-kmELhBl/05Pk3lF/1iQYl+1C5kAEOMM3OnxFyzC8u1XF6BWJzis1YIPNEwqd8kchz3ks/rd1kCoYWlP9T8q4hQ==","shasum":"7b2134138717ca5f9d76005605e1d9e22faaf738","tarball":"https://registry.npmjs.org/react-abohook-fullpage/-/react-abohook-fullpage-1.2.0.tgz","fileCount":5,"unpackedSize":34815,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE3QyDat0iJ7B8dvJVYFcK0knDk2GtfXsoA2PlxsCPbaAiAw/DcJ/vR/NCBsSDnOLFNsylVCFlHffivU7wNn0Vu2AQ=="}]},"_npmUser":{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"},"directories":{},"maintainers":[{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-abohook-fullpage_1.2.0_1774532148491_0.652439363486788"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-28T06:56:25.039Z","modified":"2026-03-26T13:35:48.770Z","1.0.0":"2026-02-28T06:56:25.193Z","1.0.1":"2026-02-28T08:16:44.346Z","1.0.2":"2026-02-28T08:22:48.345Z","1.0.3":"2026-02-28T08:59:17.312Z","1.0.4":"2026-02-28T09:01:10.223Z","1.0.5":"2026-02-28T11:29:17.974Z","1.0.6":"2026-02-28T13:12:45.921Z","1.0.7":"2026-02-28T13:40:18.704Z","1.0.8":"2026-02-28T14:20:41.773Z","1.0.9":"2026-02-28T15:06:32.619Z","1.1.0":"2026-02-28T15:14:35.178Z","1.1.1":"2026-02-28T15:51:31.632Z","1.1.2":"2026-02-28T15:57:02.001Z","1.1.3":"2026-03-01T07:41:25.349Z","1.1.4":"2026-03-01T07:45:20.583Z","1.1.5":"2026-03-01T07:54:32.272Z","1.1.6":"2026-03-09T14:02:03.394Z","1.1.7":"2026-03-09T14:07:56.740Z","1.1.8":"2026-03-12T12:50:01.636Z","1.1.9":"2026-03-12T12:58:33.851Z","1.2.0":"2026-03-26T13:35:48.653Z"},"author":{"name":"Mostafa Ahmed"},"license":"MIT","keywords":["react","fullpage","parallax","scroll","one page scroll","css transitions"],"description":"React FullPage scroll component with parallax and navigation dots","maintainers":[{"name":"abo-hook","email":"mostafaahmedxdev@gmail.com"}],"readme":"# 🚀 react-abohook-fullpage\r\n\r\n[![npm version](https://img.shields.io/npm/v/react-abohook-fullpage.svg)](https://www.npmjs.com/package/react-abohook-fullpage)\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\r\n[![GitHub](https://img.shields.io/badge/GitHub-mostafa0x-181717?logo=github)](https://github.com/mostafa0x)\r\n\r\nLightweight & Modern React FullPage Scrolling Library  \r\nSmooth Transitions • Touch Ready • Keyboard Support • ~5KB gzip\r\n\r\n<p align=\"center\">\r\n  <img src=\"https://i.makeagif.com/media/2-28-2026/oL8iYS.gif\" alt=\"React Abohook FullPage Demo\" />\r\n</p>\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n- 🖥 Smooth full-page section transitions\r\n- 🖱 Mouse wheel navigation\r\n- ⌨ Keyboard arrow navigation\r\n- 📱 Touch & swipe support (mobile optimized)\r\n- 🧭 Programmatic section control\r\n- 🦶 Optional footer support\r\n- 🔒 Built-in animation lock (prevents scroll spam)\r\n- ⚡ Lightweight (~5KB gzip)\r\n- 📦 No external animation libraries\r\n\r\n---\r\n\r\n## 🎯 Perfect For\r\n\r\n- Landing pages\r\n- Product showcases\r\n- Portfolio websites\r\n- Agency websites\r\n- One-page applications\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install react-abohook-fullpage\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add react-abohook-fullpage\r\n```\r\n\r\n---\r\n\r\n## 🛠 Basic Usage\r\n\r\n```jsx\r\nimport { FullPage } from \"react-abohook-fullpage\";\r\n\r\nexport default function App() {\r\n  return (\r\n    <div\r\n      style={{\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        backgroundColor: \"black\",\r\n      }}\r\n    >\r\n      <FullPage directionDots=\"right\" duration={700}>\r\n        <FullPage.Section>\r\n          <div\r\n            style={{\r\n              backgroundColor: \"deeppink\",\r\n              display: \"flex\",\r\n              flexDirection: \"column\",\r\n              justifyContent: \"center\",\r\n              alignItems: \"center\",\r\n              width: \"100%\",\r\n              height: \"100%\",\r\n            }}\r\n          >\r\n            <h1 style={{ fontSize: 24, color: \"white\" }}>\r\n              @abohook/fullpage Example\r\n            </h1>\r\n            <a\r\n              target=\"_blank\"\r\n              rel=\"noreferrer\"\r\n              style={{ fontSize: 22, color: \"white\" }}\r\n              href=\"https://github.com/mostafa0x\"\r\n            >\r\n              By Mostafa Ahmed\r\n            </a>\r\n          </div>\r\n        </FullPage.Section>\r\n        <FullPage.Section>\r\n          <div\r\n            style={{\r\n              backgroundColor: \"orange\",\r\n              display: \"flex\",\r\n              flexDirection: \"column\",\r\n              justifyContent: \"center\",\r\n              alignItems: \"center\",\r\n              width: \"100%\",\r\n              height: \"100%\",\r\n            }}\r\n          >\r\n            <h1 style={{ fontSize: 24, color: \"white\" }}>Section 1</h1>\r\n          </div>\r\n        </FullPage.Section>\r\n        <FullPage.Section>\r\n          <div\r\n            style={{\r\n              backgroundColor: \"blue\",\r\n              display: \"flex\",\r\n              flexDirection: \"column\",\r\n              justifyContent: \"center\",\r\n              alignItems: \"center\",\r\n              width: \"100%\",\r\n              height: \"100%\",\r\n            }}\r\n          >\r\n            <h1 style={{ fontSize: 24, color: \"white\" }}>Section 2</h1>\r\n          </div>\r\n        </FullPage.Section>\r\n        <FullPage.Footer>\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              justifyContent: \"center\",\r\n              alignItems: \"center\",\r\n              height: \"100%\",\r\n            }}\r\n          >\r\n            <h2>Footer</h2>\r\n          </div>\r\n        </FullPage.Footer>\r\n      </FullPage>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n## ⚙️ API Overview\r\n\r\n### `<FullPage />`\r\n\r\n| Prop                | Type                            | Default     | Description                         |\r\n| ------------------- | ------------------------------- | ----------- | ----------------------------------- |\r\n| `onChange`          | `(index: number) => void`       | `undefined` | Triggered when section changes      |\r\n| `duration`          | `number`                        | `700`       | Transition duration in milliseconds |\r\n| `directionDots`     | `\"left\" \\| \"right\" \\| \"bottom\"` | `\"right\"`   | Position of navigation dots         |\r\n| `enableContextMenu` | `boolean`                       | `true`      | Enable right-click context menu     |\r\n| `closeOutside`      | `boolean`                       | `false`     | Close When click outside            |\r\n| `disable`           | `boolean`                       | `false`     | Disable Scroll for fullPage         |\r\n\r\n---\r\n\r\n### `<FullPage.Section />`\r\n\r\nWrap each full screen section.\r\n\r\n---\r\n\r\n### `<FullPage.Footer />`\r\n\r\nOptional footer that appears after the last section.\r\n\r\n---\r\n\r\n## ⚡ Why react-abohook-fullpage?\r\n\r\nUnlike heavy animation-based fullpage libraries:\r\n\r\n- ❌ No framer-motion required\r\n- ❌ No GSAP required\r\n- ❌ No large dependencies\r\n- ✅ Pure lightweight logic\r\n- ✅ Optimized for performance\r\n- ✅ Clean developer API\r\n- ✅ Production-ready\r\n\r\n---\r\n\r\n## 📱 Cross-Platform Ready\r\n\r\nWorks seamlessly across:\r\n\r\n- Desktop browsers\r\n- Mobile devices\r\n- Touch screens\r\n- Keyboard navigation\r\n\r\nBuilt for real-world production environments.\r\n\r\n---\r\n\r\n## 📄 License\r\n\r\nMIT © Mostafa Ahmed\r\n","readmeFilename":"README.md"}