Example

Here are some examples of how to use Jump Section with different frameworks.

React

import { ScrollSectionProvider, useScrollSection } from '@jump-section/react';
 
function App() {
  return (
    <ScrollSectionProvider offset={-80} behavior="smooth">
      <Navigation />
      <Content />
    </ScrollSectionProvider>
  );
}
 
function Navigation() {
  const { scrollTo, activeId } = useScrollSection();
 
  return (
    <nav>
      <button
        onClick={() => scrollTo('section-1')}
        className={activeId === 'section-1' ? 'active' : ''}
      >
        Section 1
      </button>
      <button
        onClick={() => scrollTo('section-2')}
        className={activeId === 'section-2' ? 'active' : ''}
      >
        Section 2
      </button>
    </nav>
  );
}
 
function Content() {
  const section1 = useScrollSection('section-1');
  const section2 = useScrollSection('section-2');
 
  return (
    <main>
      <section ref={section1.registerRef}>
        <h2>Section 1</h2>
        <p>Content here...</p>
      </section>
      <section ref={section2.registerRef}>
        <h2>Section 2</h2>
        <p>Content here...</p>
      </section>
    </main>
  );
}

Using the Section component

You can use Section for a simpler setup without manual ref registration.

import { ScrollSectionProvider, Section, useScrollSection } from '@jump-section/react';
 
function App() {
  return (
    <ScrollSectionProvider offset={-80} behavior="smooth">
      <Navigation />
      <main>
        <Section id="section-1">
          <h2>Section 1</h2>
          <p>Content here...</p>
        </Section>
        <Section id="section-2">
          <h2>Section 2</h2>
          <p>Content here...</p>
        </Section>
      </main>
    </ScrollSectionProvider>
  );
}

Vue 3

<template>
  <ScrollSectionProvider :offset="-80" behavior="smooth">
    <Navigation />
    <Content />
  </ScrollSectionProvider>
</template>
 
<script setup lang="ts">
import { ScrollSectionProvider } from '@jump-section/vue';
import Navigation from './Navigation.vue';
import Content from './Content.vue';
</script>

Navigation.vue

<template>
  <nav>
    <button @click="scrollTo('section-1')" :class="{ active: activeId === 'section-1' }">
      Section 1
    </button>
    <button @click="scrollTo('section-2')" :class="{ active: activeId === 'section-2' }">
      Section 2
    </button>
  </nav>
</template>
 
<script setup lang="ts">
import { useScrollSection } from '@jump-section/vue';
 
const { scrollTo, activeId } = useScrollSection();
</script>

Content.vue

<template>
  <main>
    <section :ref="section1.registerRef">
      <h2>Section 1</h2>
      <p>Content here...</p>
    </section>
    <section :ref="section2.registerRef">
      <h2>Section 2</h2>
      <p>Content here...</p>
    </section>
  </main>
</template>
 
<script setup lang="ts">
import { useScrollSection } from '@jump-section/vue';
 
const section1 = useScrollSection('section-1');
const section2 = useScrollSection('section-2');
</script>