React에서 대상 위치 관찰: 원활한 스크롤 감지 및 동적 콘텐츠 스타일링

긴 콘텐츠를 스크롤하면서 전체 계획에서 자신이 어디에 있는지 궁금해한 적이 있나요? 우리 모두 거기에 가봤습니다. 작업을 더 쉽게 하기 위해 스크롤할 때 목차(TOC)를 업데이트하여 페이지에서의 위치를 ​​추적하는 데 도움이 되는 간단한 npm 패키지를 만들었습니다. 문서 웹사이트에서 작업하든 여러 섹션으로 구성된 프로젝트에서 작업하든 이 패키지가 도움이 될 것입니다.

여기에서 데모를 확인하세요.

홈페이지를 방문해보세요.

패키지 안에 무엇이 들어있나요?

이 패키지에는 스크롤 추적을 사이트에 쉽게 통합할 수 있는 세 가지 구성 요소와 하나의 후크가 포함되어 있습니다.

1. InViewProvider: 이는 작업의 두뇌와 같습니다. 현재 어떤 섹션이 표시되어 있는지 추적하고 모든 것이 동기화 상태를 유지하는지 확인합니다. 스크롤 추적을 활성화하려는 앱 부분을 감싸기만 하면 됩니다.

2. 타겟: 콘텐츠의 각 섹션에 추가하는 태그라고 생각하세요. 섹션을 Target 구성 요소로 래핑하면 패키지에 "이것을 주목하세요!"라고 알리는 것입니다.

3. ObserveZone: 이곳은 모든 액션이 일어나는 공간입니다. 콘텐츠와 타겟을 감시하여 스크롤할 때 목차 업데이트를 보장하는 눈에 보이지 않는 구성 요소입니다.

4. useInView: 섹션이 표시되면 알려주는 편리한 후크입니다. 이는 애니메이션 실행, 콘텐츠 지연 로딩 또는 섹션이 표시될 때 발생하려는 모든 작업에 적합합니다.

이것이 유용할 수 있는 이유

• 사용자의 지속적인 추적: 사용자가 콘텐츠를 스크롤하면 TOC가 자동으로 업데이트되므로 읽고 있는 섹션을 쉽게 확인할 수 있습니다. 더 이상 긴 페이지에서 헤매지 마세요!

• 다양한 사용 사례: 문서 사이트에 적합하지만 특정 섹션이 보일 때 애니메이션을 실행하거나 리소스를 절약하기 위해 콘텐츠를 지연 로딩하는 등의 다른 작업에도 이 패키지를 사용할 수 있습니다. 사용자가 스크롤할 때 API를 호출하기도 합니다.

• 구현 용이성: 패키지는 간단하게 설계되었습니다. 몇 가지 구성요소와 후크만 있으면 큰 어려움 없이 React 프로젝트에 추가할 수 있습니다.

가능한 사용 사례

• 문서 사이트: TOC 항목을 콘텐츠 섹션과 연결하는 데 적합하므로 사용자는 항상 위치를 알 수 있습니다.

• 애니메이션 및 효과: 감각을 더하고 싶으십니까? 섹션이 뷰포트에 들어갈 때 useInView 후크를 사용하여 애니메이션을 트리거합니다.

• 콘텐츠 지연 로드: 필요할 때만 구성 요소를 로드하여 로드 시간을 절약합니다.

• 동적 API 호출: 사용자가 페이지를 스크롤할 때 동적으로 데이터를 가져오거나 콘텐츠를 로드합니다.

시작하는 방법

이 패키지를 설치하고 실행하는 것은 매우 쉽습니다. 먼저 npm을 통해 설치하세요.

npm install target-observer

그런 다음 프로젝트의 구성요소를 다음과 같이 사용하세요.

import { InViewProvider, Target, ObserveZone, useInView } from 'target-observer';

function DocumentationPage() {
  return (
    <InViewProvider targetIds={["section1", "section2"]}>
      <div style={{ position: "relative" }}>
       <ObserveZone />
         <TableOfContents />
         <main>
           <Target id="section1"><Section1 /></Target>
           <Target id="section2"><Section2 /></Target>
           {/* Add more sections as needed */}
         </main>
      </div>
    </InViewProvider>
  );
}

그리고 그게 다입니다! 이 몇 줄의 코드만 있으면 사용자가 스크롤할 때 TOC가 업데이트되어 탐색이 쉬워집니다.

요약

이 npm 패키지는 웹사이트 탐색 기능을 향상시키는 간단하면서도 효과적인 방법입니다. 문서 작업을 하든, 콘텐츠가 많은 프로젝트를 작업하든, 이 도구는 작업을 체계적이고 사용자 친화적으로 유지하는 데 도움이 됩니다. 저처럼 여러분에게도 유용하길 바랍니다!

Unsplash의 Patrick Hendry 표지 사진

위 내용은 React에서 대상 위치 관찰: 원활한 스크롤 감지 및 동적 콘텐츠 스타일링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!