@shannon_joyful/fullpage

DOM-first fullpage section controller with React and Vue adapters.

Install

npm install @shannon_joyful/fullpage

Always import the default stylesheet once in your app entry:

import "@shannon_joyful/fullpage/style.css";

React Quick Start

import { useRef } from "react";
import { FullPage, FullPageScrollable, type FullPageHandle } from "@shannon_joyful/fullpage/react";
import "@shannon_joyful/fullpage/style.css";

export function App() {
  const fullPageRef = useRef<FullPageHandle | null>(null);

  return (
    <FullPage
      ref={fullPageRef}
      externalMoveEventName="app-fullpage:move-to"
      sections={[
        { label: "Hero", children: <section>Hero</section> },
        {
          id: "features",
          label: "Features",
          children: (
            <FullPageScrollable>
              <section style={{ minHeight: 1200 }}>Scrollable content</section>
            </FullPageScrollable>
          ),
        },
        { label: "Contact", children: <section>Contact</section> },
      ]}
    />
  );
}

Move programmatically:

fullPageRef.current?.moveTo(1);
window.dispatchEvent(new CustomEvent("app-fullpage:move-to", { detail: { index: 0 } }));

Vue Quick Start

<script setup lang="ts">
import { ref } from "vue";
import { FullPage, FullPageScrollable } from "@shannon_joyful/fullpage/vue";
import "@shannon_joyful/fullpage/style.css";

const fullPage = ref();
const sections = [
  { label: "Hero" },
  { id: "features", label: "Features" },
  { label: "Contact" },
];
</script>

<template>
  <FullPage ref="fullPage" :sections="sections" external-move-event-name="app-fullpage:move-to">
    <template #default="{ section, active }">
      <FullPageScrollable v-if="section.id === 'features'">
        <section style="min-height: 1200px">Scrollable {{ section.label }}</section>
      </FullPageScrollable>
      <section v-else>{{ section.label }} {{ active ? "active" : "" }}</section>
    </template>
  </FullPage>
</template>

Core DOM Usage

import { createFullPageController } from "@shannon_joyful/fullpage/core";
import "@shannon_joyful/fullpage/style.css";

const controller = createFullPageController(document.querySelector(".shannon-fullpage")!, {
  externalMoveEventName: "app-fullpage:move-to",
  resetScrollableOnEnter: true,
});

controller.moveTo(2);

Expected DOM shape:

<main class="shannon-fullpage">
  <div class="shannon-fullpage__track">
    <section class="shannon-fullpage__section">Hero</section>
    <section class="shannon-fullpage__section">
      <div class="shannon-fullpage__scrollable">Scrollable content</div>
    </section>
  </div>
</main>

Options

• initialIndex
• transitionMs
• responsiveQuery
• wheelThreshold
• touchThreshold
• keyboard
• navigation
• resetScrollableOnEnter
• scrollableSelector
• externalMoveEventName
• onBeforeChange(from, to)
• onAfterChange(index)

CSS Variables

Override these on .shannon-fullpage or a wrapping layout:

.app-shell .shannon-fullpage {
  --shannon-fullpage-top-offset: 96px;
  --shannon-fullpage-bg: #071610;
  --shannon-fullpage-transition-ms: 720ms;
  --shannon-fullpage-nav-color: #d7f7e5;
  --shannon-fullpage-nav-active-color: #3edc81;
}

Public Entry Points

• @shannon_joyful/fullpage
• @shannon_joyful/fullpage/core
• @shannon_joyful/fullpage/react
• @shannon_joyful/fullpage/vue
• @shannon_joyful/fullpage/style.css

Publish Readiness

This repository validates publish readiness without publishing:

npm run test:fullpage
npm run build:fullpage
npm run pack:fullpage

npm run pack:fullpage runs npm pack --dry-run; it does not execute npm publish.