Fullsnap

A lightweight, zero-dependency React library for smooth section snapping, keyboard navigation, touch gestures, and anchor-based routing.

Features

• Full-page section snapping
• Smooth animated scrolling
• Keyboard navigation
• Mouse wheel support
• Touch & swipe gestures
• URL hash navigation (/#about)
• Auto-synced navigation menus
• TypeScript support
• Works with Next.js, Vite, Remix, and React apps
• No external dependencies

Installation

npm install fullsnap

pnpm add fullsnap

yarn add fullsnap

Quick Start

import { FullSnapProvider, FullSnapWrapper, Section } from "fullsnap";

export default function App() {
  return (
    <FullSnapProvider
      anchors={["home", "about", "projects", "contact"]}
      scrollingSpeed={1000}
      menu="#navigation"
    >
      <FullSnapWrapper>
        <Section>
          <h1>Home</h1>
        </Section>

        <Section>
          <h1>About</h1>
        </Section>

        <Section>
          <h1>Projects</h1>
        </Section>

        <Section>
          <h1>Contact</h1>
        </Section>
      </FullSnapWrapper>
    </FullSnapProvider>
  );
}

Navigation Menu

<nav id="navigation">
  <ul>
    <li data-menuanchor="home">Home</li>
    <li data-menuanchor="about">About</li>
    <li data-menuanchor="projects">Projects</li>
    <li data-menuanchor="contact">Contact</li>
  </ul>
</nav>

Active menu items automatically receive the active class.

li.active {
  font-weight: bold;
}

Programmatic Navigation

Use the useFullPage() hook to control navigation from anywhere inside the provider.

import { useFullPage } from "fullsnap";

function Controls() {
  const { moveTo, moveNext, movePrevious } = useFullPage();

  return (
    <>
      <button onClick={() => moveTo("about")}>About</button>

      <button onClick={movePrevious}>Previous</button>

      <button onClick={moveNext}>Next</button>
    </>
  );
}

Provider Options

| Prop | Type | Default | | ----------------- | -------- | --------- | | scrollingSpeed | number | 1000 | | anchors | string[] | [] | | menu | string | undefined | | lockAnchors | boolean | false | | keyboardScrolling | boolean | true | | touchScrolling | boolean | true | | wheelScrolling | boolean | true | | scrollThreshold | number | 50 | | touchThreshold | number | 50 |

Events

<FullSnapProvider
  onSectionChange={(prev, next) => {
    console.log(prev, next);
  }}
  beforeScroll={(origin, destination) => {
    console.log(origin, destination);
  }}
  afterScroll={(origin, destination) => {
    console.log(origin, destination);
  }}
>

Hook API

const {
  moveTo,
  moveNext,
  movePrevious,
  getActiveSection,
  setAllowScrolling,
  activeIndex,
  isScrolling,
  scrollDirection,
  totalSections,
} = useFullPage();

License

MIT License

Copyright (c) 2026 Nur Afif Misbahuddin

Credits

Inspired by fullPage.js