React でのターゲット位置の観察: シームレスなスクロール検出と動的なコンテンツ スタイリング

長いコンテンツをスクロールしているときに、全体像のどこにいるのか迷ってしまったことはありませんか?私たちは皆、そこに行ったことがあるでしょう。作業を簡単にするために、スクロールに応じて目次 (TOC) を更新することで、ページ上の位置を追跡できるようにするシンプルな npm パッケージを作成しました。ドキュメント Web サイトで作業している場合でも、複数のセクションからなるプロジェクトで作業している場合でも、このパッケージが役に立ちます。

ここでデモをご覧ください。

ここからホームページにアクセスしてください。

パッケージの中身は何ですか?

このパッケージには、スクロール トラッキングをサイトに簡単に統合できるようにする 3 つのコンポーネントと 1 つのフックが付属しています。

1. InViewProvider: これは操作の頭脳のようなものです。現在表示されているセクションを追跡し、すべてが同期していることを確認します。スクロール トラッキングを有効にしたいアプリの部分を囲むだけです。

2. ターゲット: これは、コンテンツの各セクションに付けるタグと考えてください。セクションを Target コンポーネントでラップすると、パッケージに「これに注目してください!」と伝えることになります

3. ObserveZone: これは、すべてのアクションが発生するスペースです。これはコンテンツとターゲットを監視する目に見えないコンポーネントであり、スクロールに応じて目次が確実に更新されます。

4. useInView: セクションが表示されていることを知らせる便利なフック。これは、アニメーションのトリガー、コンテンツの遅延読み込み、またはセクションが表示されたときに実行したいその他の操作に最適です。

これが役立つ理由

• ユーザーの把握を維持: ユーザーがコンテンツをスクロールすると、目次が自動的に更新されるため、どのセクションを読んでいるのかを簡単に確認できます。もう長いページで迷うことはありません!

• 多彩な使用例: ドキュメント サイトに最適ですが、このパッケージは、特定のセクションが表示されたときにアニメーションをトリガーしたり、リソースを節約するためにコンテンツを遅延読み込みしたり、その他の目的にも使用できます。ユーザーがスクロールしながら API 呼び出しを行うこともできます。

• 実装が簡単: パッケージは簡単に設計されています。いくつかのコンポーネントとフックを使用するだけで、手間をかけずに React プロジェクトに追加できます。

考えられる使用例

• ドキュメント サイト: 目次項目とコンテンツ セクションをリンクするのに最適なので、ユーザーは常にどこにいるかを把握できます。

• アニメーションとエフェクト: センスを加えたいですか? 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>
  );
}

それで終わりです!これらの数行のコードにより、ユーザーがスクロールすると目次が更新され、ナビゲーションが簡単になります。

まとめ

この npm パッケージは、Web サイトのナビゲーションを強化するためのシンプルかつ効果的な方法です。ドキュメントやその他のコンテンツの多いプロジェクトに取り組んでいる場合でも、このツールは物事を整理して使いやすく保つのに役立ちます。私と同じように皆さんにも役立つことを願っています!

Unsplash のパトリック・ヘンドリーによるカバー写真

以上がReact でのターゲット位置の観察: シームレスなスクロール検出と動的なコンテンツ スタイリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。