React API

@jump-section/react 패키지는 Jump Section Core 로직을 감싸는 Context-aware 래퍼를 제공합니다.

ScrollSectionProvider

애플리케이션이나 특정 스크롤 영역을 감싸야 하는 Provider 컴포넌트입니다.

Props

• offset?: number: 스크롤 위치의 수직 오프셋 (기본값: 0).
• behavior?: 'smooth' | 'auto': 스크롤 동작 (기본값: 'smooth').
• children: ReactNode: 애플리케이션 컴포넌트.

<ScrollSectionProvider offset={-100} behavior="smooth">
  <App />
</ScrollSectionProvider>

useScrollSection(sectionId?: string)

스크롤 매니저와 상호작용하기 위한 주요 Hook입니다.

Parameters

• sectionId?: string: (선택) 섹션의 고유 식별자.

Returns

sectionId 없이 호출할 경우 (Global state):

• scrollTo: (id: string) => void: 특정 섹션으로 스크롤하는 함수.
• activeId: string | null: 현재 활성화된 섹션의 ID.

sectionId와 함께 호출할 경우 (Section registration):

• registerRef: (element: HTMLElement | null) => void: 섹션 엘리먼트에 연결할 Ref 콜백.
• isActive: boolean: 이 특정 섹션이 현재 활성화되어 있는지 여부.
• scrollTo: (id: string) => void: 공유된 스크롤 함수.
• activeId: string | null: 공유된 활성화 ID 상태.

Examples

섹션 등록하기 (Registering a Section)

const { registerRef, isActive } = useScrollSection('my-section');
 
return (
  <section ref={registerRef} className={isActive ? 'bg-blue-100' : ''}>
    <h2>My Section</h2>
  </section>
);

내비게이션 링크 만들기 (Creating a Navigation Link)

const { scrollTo, activeId } = useScrollSection();
 
return (
  <button onClick={() => scrollTo('my-section')}>
    {activeId === 'my-section' ? '현재 위치' : '섹션으로 이동'}
  </button>
);

Section

useScrollSection을 사용하여 직접 ref를 등록하는 대신 사용할 수 있는 래퍼 컴포넌트입니다.

Props

• id: string: (필수) 섹션의 고유 식별자.
• as?: ElementType: (선택) 렌더링할 HTML 태그 또는 컴포넌트 (기본값: 'section').
• 그 외 HTML 속성 (className, style, etc.)

Example

import { Section } from '@jump-section/react';
 
<Section id="section-1" className="p-10">
  <h1>Section 1</h1>
</Section>
 
// 다른 태그로 렌더링
<Section id="section-2" as="div">
  <h1>Section 2 (Div)</h1>
</Section>