{"_id":"@alvalens/react-fullpage-snap","_rev":"3-f50be16367e8393042ba55a4ea931221","name":"@alvalens/react-fullpage-snap","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@alvalens/react-fullpage-snap","version":"1.0.0","keywords":["react","fullpage","scroll-snap","scroll","nextjs","smooth-scroll","sections","snap-scroll","fullpage-scroll","react-scroll"],"author":{"url":"https://alvalens.my.id","name":"Alvalen Shafelbilyunazra","email":"alvalen.shafel04@gmail.com"},"license":"MIT","_id":"@alvalens/react-fullpage-snap@1.0.0","maintainers":[{"name":"alvalens","email":"alvalen.shafel04@gmail.com"}],"homepage":"https://github.com/Alvalens/react-fullpage-snap#readme","bugs":{"url":"https://github.com/Alvalens/react-fullpage-snap/issues"},"dist":{"shasum":"a988dda7c113aa55dfa9cadda3ab141bc9abe674","tarball":"https://registry.npmjs.org/@alvalens/react-fullpage-snap/-/react-fullpage-snap-1.0.0.tgz","fileCount":7,"integrity":"sha512-bzUnWaQYjmz5zMwPv1OrIFvRvJzmEzOuAe+Ac1/RwR/NANfIcGlN3XxzHjfv8YwWLuzPEd8ku3cQIZqwAlJIyA==","signatures":[{"sig":"MEYCIQCOHAFIfNyFcV/DU2gSkuTZhqn2GI7RN0zkj+T0yaQGbgIhAJ+e+Yg1F9NPIju/3jsZINE2AQ//2sK7BO8ggBfLU98x","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33805},"main":"dist/index.js","_from":"file:alvalens-react-fullpage-snap-1.0.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts"},"_npmUser":{"name":"alvalens","email":"alvalen.shafel04@gmail.com"},"_resolved":"C:\\Users\\Alvalen\\AppData\\Local\\Temp\\c434275cf29a673fa0977573592c3261\\alvalens-react-fullpage-snap-1.0.0.tgz","_integrity":"sha512-bzUnWaQYjmz5zMwPv1OrIFvRvJzmEzOuAe+Ac1/RwR/NANfIcGlN3XxzHjfv8YwWLuzPEd8ku3cQIZqwAlJIyA==","repository":{"url":"git+https://github.com/Alvalens/react-fullpage-snap.git","type":"git"},"_npmVersion":"11.6.2","description":"Fullpage scroll snap for React with smooth animations - zero dependencies","directories":{},"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.3.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-fullpage-snap_1.0.0_1769920814161_0.08127707043923915","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@alvalens/react-fullpage-snap","version":"1.0.1","keywords":["react","fullpage","scroll-snap","scroll","nextjs","smooth-scroll","sections","snap-scroll","fullpage-scroll","react-scroll"],"author":{"url":"https://alvalens.my.id","name":"Alvalen Shafelbilyunazra","email":"alvalen.shafel04@gmail.com"},"license":"MIT","_id":"@alvalens/react-fullpage-snap@1.0.1","maintainers":[{"name":"alvalens","email":"alvalen.shafel04@gmail.com"}],"homepage":"https://github.com/Alvalens/react-fullpage-snap#readme","bugs":{"url":"https://github.com/Alvalens/react-fullpage-snap/issues"},"dist":{"shasum":"24089d547e65cbd8ffaecb11e9b7f55f82e910ad","tarball":"https://registry.npmjs.org/@alvalens/react-fullpage-snap/-/react-fullpage-snap-1.0.1.tgz","fileCount":7,"integrity":"sha512-D6ZEJ5ITftCl7Y7OrS86Z9k0w9YRUQ1b0wv2AHxJyI7l3JTAB6dLEgaSZ8dJjSXU2Til1ZrnM/xfBkaijBq8hA==","signatures":[{"sig":"MEUCIAa5jzLxkUZiB/xIfw5yAKoCgp0rz75v+GAf1Q3gNZxeAiEAlrd7SBhIvyak4Hlg/Oa36JjJU9pK+qTvAM40iPmfVs4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37592},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"904dde08a41f87c0747567904a9eb8c4b6eaa108","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"pnpm build"},"_npmUser":{"name":"alvalens","email":"alvalen.shafel04@gmail.com"},"repository":{"url":"git+https://github.com/Alvalens/react-fullpage-snap.git","type":"git"},"_npmVersion":"11.6.2","description":"Fullpage scroll snap for React with smooth animations - zero dependencies","directories":{},"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.3.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-fullpage-snap_1.0.1_1769924139469_0.6801343732332525","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alvalens/react-fullpage-snap","version":"1.0.2","description":"Fullpage scroll snap for React with smooth animations - zero dependencies","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","dev":"tsup src/index.ts --format cjs,esm --dts --watch","prepublishOnly":"pnpm build"},"keywords":["react","fullpage","scroll-snap","scroll","nextjs","smooth-scroll","sections","snap-scroll","fullpage-scroll","react-scroll"],"author":{"name":"Alvalen Shafelbilyunazra","email":"alvalen.shafel04@gmail.com","url":"https://alvalens.my.id"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Alvalens/react-fullpage-snap.git"},"bugs":{"url":"https://github.com/Alvalens/react-fullpage-snap/issues"},"homepage":"https://github.com/Alvalens/react-fullpage-snap#readme","peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","tsup":"^8.0.0","typescript":"^5.3.0"},"gitHead":"c886d076f307f165f215e88581b6e11a2da025ff","_id":"@alvalens/react-fullpage-snap@1.0.2","_nodeVersion":"18.8.0","_npmVersion":"8.18.0","dist":{"integrity":"sha512-xI1s5CAILzuNqUcvXqK0eZ/9ldkgCHfVYZt2cLbJfdEsnVp/dyxjBgQQjIQCPgvlHcjIthywXYAGeBh54AZncw==","shasum":"8e4ff13f4e2dcceb5bf93fcf5a6e45096e07e7c5","tarball":"https://registry.npmjs.org/@alvalens/react-fullpage-snap/-/react-fullpage-snap-1.0.2.tgz","fileCount":7,"unpackedSize":38106,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB5WmaD7Bml5E/071+LoGfhVnn4X+IrY3Mg6u2KK/t8QAiBPg/creSJKRbs57LOnIfftRNlwTYfC1dUo1K/xovkUZw=="}]},"_npmUser":{"name":"alvalens","email":"alvalen.shafel04@gmail.com"},"directories":{},"maintainers":[{"name":"alvalens","email":"alvalen.shafel04@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-fullpage-snap_1.0.2_1769959730906_0.5057902905086766"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-01T04:40:14.089Z","modified":"2026-02-01T15:28:51.177Z","1.0.0":"2026-02-01T04:40:14.308Z","1.0.1":"2026-02-01T05:35:39.608Z","1.0.2":"2026-02-01T15:28:51.049Z"},"bugs":{"url":"https://github.com/Alvalens/react-fullpage-snap/issues"},"author":{"name":"Alvalen Shafelbilyunazra","email":"alvalen.shafel04@gmail.com","url":"https://alvalens.my.id"},"license":"MIT","homepage":"https://github.com/Alvalens/react-fullpage-snap#readme","keywords":["react","fullpage","scroll-snap","scroll","nextjs","smooth-scroll","sections","snap-scroll","fullpage-scroll","react-scroll"],"repository":{"type":"git","url":"git+https://github.com/Alvalens/react-fullpage-snap.git"},"description":"Fullpage scroll snap for React with smooth animations - zero dependencies","maintainers":[{"name":"alvalens","email":"alvalen.shafel04@gmail.com"}],"readme":"# @alvalens/react-fullpage-snap\r\n\r\nA lightweight, modern React library for fullpage scroll snapping with smooth animations. Built from the ground up for React with zero dependencies and full TypeScript support.\r\n\r\n## Features\r\n\r\n- **Smooth scroll snapping** between sections\r\n- **Keyboard navigation** (Arrow keys, Page Up/Down, Home/End, Space)\r\n- **Mouse wheel** scrolling with momentum detection\r\n- **Touch/swipe** support for mobile devices\r\n- **Hash-based navigation** (`/#section-name`)\r\n- **Menu synchronization** with auto-highlighting\r\n- **Framework agnostic** - works with Next.js, Remix, Vite, etc.\r\n- **TypeScript** support out of the box\r\n- **Lightweight** - no external dependencies\r\n- **Performance optimized** with RAF-based animations\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @alvalens/react-fullpage-snap\r\n# or\r\npnpm add @alvalens/react-fullpage-snap\r\n# or\r\nyarn add @alvalens/react-fullpage-snap\r\n```\r\n\r\n## Basic Usage\r\n\r\n```tsx\r\nimport { FullPageProvider, FullPageWrapper, Section } from '@alvalens/react-fullpage-snap';\r\n\r\nfunction App() {\r\n  return (\r\n    <FullPageProvider\r\n      scrollingSpeed={1000}\r\n      anchors={['home', 'about', 'projects', 'contact']}\r\n      menu=\"#navigation\"\r\n    >\r\n      <FullPageWrapper>\r\n        <Section>\r\n          <h1>Home</h1>\r\n        </Section>\r\n        <Section>\r\n          <h1>About</h1>\r\n        </Section>\r\n        <Section>\r\n          <h1>Projects</h1>\r\n        </Section>\r\n        <Section>\r\n          <h1>Contact</h1>\r\n        </Section>\r\n      </FullPageWrapper>\r\n    </FullPageProvider>\r\n  );\r\n}\r\n```\r\n\r\n### Menu Integration\r\n\r\n```tsx\r\n<nav id=\"navigation\">\r\n  <ul>\r\n    <li data-menuanchor=\"home\">Home</li>\r\n    <li data-menuanchor=\"about\">About</li>\r\n    <li data-menuanchor=\"projects\">Projects</li>\r\n    <li data-menuanchor=\"contact\">Contact</li>\r\n  </ul>\r\n</nav>\r\n```\r\n\r\nAdd this CSS for active menu highlighting:\r\n\r\n```css\r\n.section {\r\n  height: 100vh;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\nli.active {\r\n  /* Your active styles */\r\n}\r\n```\r\n\r\n## Programmatic Navigation\r\n\r\nUse the `useFullPage` hook to access navigation methods:\r\n\r\n```tsx\r\nimport { useFullPage } from '@alvalens/react-fullpage-snap';\r\n\r\nfunction NavigationButtons() {\r\n  const { moveTo, moveNext, movePrevious, getActiveSection } = useFullPage();\r\n\r\n  return (\r\n    <div>\r\n      <button onClick={() => moveTo(0)}>Go to first</button>\r\n      <button onClick={() => moveTo('about')}>Go to about</button>\r\n      <button onClick={moveNext}>Next section</button>\r\n      <button onClick={movePrevious}>Previous section</button>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## API Reference\r\n\r\n### FullPageProvider Props\r\n\r\n| Prop                  | Type         | Default       | Description                                      |\r\n| --------------------- | ------------ | ------------- | ------------------------------------------------ |\r\n| `scrollingSpeed`    | `number`   | `1000`      | Scroll animation duration in ms                  |\r\n| `anchors`           | `string[]` | `[]`        | URL anchors for each section                     |\r\n| `menu`              | `string`   | `undefined` | CSS selector for menu (uses `data-menuanchor`) |\r\n| `lockAnchors`       | `boolean`  | `false`     | Prevent anchor changes in URL                    |\r\n| `keyboardScrolling` | `boolean`  | `true`      | Enable keyboard navigation                       |\r\n| `touchScrolling`    | `boolean`  | `true`      | Enable touch/swipe navigation                    |\r\n| `wheelScrolling`    | `boolean`  | `true`      | Enable mouse wheel navigation                    |\r\n| `scrollThreshold`   | `number`   | `50`        | Wheel delta threshold for triggering scroll      |\r\n| `touchThreshold`    | `number`   | `50`        | Touch swipe distance threshold (px)              |\r\n\r\n### Callbacks\r\n\r\n```tsx\r\n<FullPageProvider\r\n  onSectionChange={(prevIndex, nextIndex) => {\r\n    console.log(`Changed from ${prevIndex} to ${nextIndex}`);\r\n  }}\r\n  beforeScroll={(origin, destination) => {\r\n    console.log('Before scroll', origin, destination);\r\n  }}\r\n  afterScroll={(origin, destination) => {\r\n    console.log('After scroll', origin, destination);\r\n  }}\r\n>\r\n```\r\n\r\n### useFullPage Hook\r\n\r\n```tsx\r\nconst {\r\n  moveTo,           // (index: number | anchor: string) => void\r\n  moveNext,         // () => void\r\n  movePrevious,     // () => void\r\n  getActiveSection, // () => SectionInfo\r\n  setAllowScrolling, // (allow: boolean) => void\r\n  activeIndex,      // number\r\n  isScrolling,      // boolean\r\n  scrollDirection,  // 'up' | 'down' | null\r\n  totalSections,    // number\r\n} = useFullPage();\r\n```\r\n\r\n## License\r\n\r\nMIT © Alvalen Shafelbilyunazra\r\n\r\n## Credits\r\n\r\nCreated by [Alvalen Shafelbilyunazra](https://alvalens.my.id)\r\n\r\nInspired by fullpage.js by Alvaro Trigo\r\n","readmeFilename":"README.md"}