🚀 react-abohook-fullpage

Lightweight & Modern React FullPage Scrolling Library
Smooth Transitions • Touch Ready • Keyboard Support • ~5KB gzip

✨ Features

• 🖥 Smooth full-page section transitions
• 🖱 Mouse wheel navigation
• ⌨ Keyboard arrow navigation
• 📱 Touch & swipe support (mobile optimized)
• 🧭 Programmatic section control
• 🦶 Optional footer support
• 🔒 Built-in animation lock (prevents scroll spam)
• ⚡ Lightweight (~5KB gzip)
• 📦 No external animation libraries

🎯 Perfect For

• Landing pages
• Product showcases
• Portfolio websites
• Agency websites
• One-page applications

📦 Installation

npm install react-abohook-fullpage

or

yarn add react-abohook-fullpage

🛠 Basic Usage

import { FullPage } from "react-abohook-fullpage";

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        backgroundColor: "black",
      }}
    >
      <FullPage directionDots="right" duration={700}>
        <FullPage.Section>
          <div
            style={{
              backgroundColor: "deeppink",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              width: "100%",
              height: "100%",
            }}
          >
            <h1 style={{ fontSize: 24, color: "white" }}>
              @abohook/fullpage Example
            </h1>
            <a
              target="_blank"
              rel="noreferrer"
              style={{ fontSize: 22, color: "white" }}
              href="https://github.com/mostafa0x"
            >
              By Mostafa Ahmed
            </a>
          </div>
        </FullPage.Section>
        <FullPage.Section>
          <div
            style={{
              backgroundColor: "orange",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              width: "100%",
              height: "100%",
            }}
          >
            <h1 style={{ fontSize: 24, color: "white" }}>Section 1</h1>
          </div>
        </FullPage.Section>
        <FullPage.Section>
          <div
            style={{
              backgroundColor: "blue",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              width: "100%",
              height: "100%",
            }}
          >
            <h1 style={{ fontSize: 24, color: "white" }}>Section 2</h1>
          </div>
        </FullPage.Section>
        <FullPage.Footer>
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              height: "100%",
            }}
          >
            <h2>Footer</h2>
          </div>
        </FullPage.Footer>
      </FullPage>
    </div>
  );
}

⚙️ API Overview

<FullPage />

| Prop | Type | Default | Description | | ------------------- | ------------------------------- | ----------- | ----------------------------------- | | onChange | (index: number) => void | undefined | Triggered when section changes | | duration | number | 700 | Transition duration in milliseconds | | directionDots | "left" \| "right" \| "bottom" | "right" | Position of navigation dots | | enableContextMenu | boolean | true | Enable right-click context menu | | closeOutside | boolean | false | Close When click outside | | disable | boolean | false | Disable Scroll for fullPage |

<FullPage.Section />

Wrap each full screen section.

<FullPage.Footer />

Optional footer that appears after the last section.

⚡ Why react-abohook-fullpage?

Unlike heavy animation-based fullpage libraries:

• ❌ No framer-motion required
• ❌ No GSAP required
• ❌ No large dependencies
• ✅ Pure lightweight logic
• ✅ Optimized for performance
• ✅ Clean developer API
• ✅ Production-ready

📱 Cross-Platform Ready

Works seamlessly across:

• Desktop browsers
• Mobile devices
• Touch screens
• Keyboard navigation

Built for real-world production environments.

📄 License

MIT © Mostafa Ahmed