在 React 中觀察目標位置：無縫滾動偵測和動態內容樣式

您是否曾經在滾動瀏覽一大段內容時迷失方向，想知道自己在宏偉的計劃中處於何處？我們都去過那裡。為了讓事情變得更簡單，我創建了一個簡單的 npm 包，它可以透過在滾動時更新目錄 (TOC) 來幫助您追蹤頁面上的位置。無論您是在開發文件網站還是包含多個部分的項目，此套件都可以為您提供協助。

在此處查看示範。

在這裡造訪首頁。

包裝內有什麼？

此軟體包包含三個組件和一個掛鉤，可以輕鬆將滾動追蹤整合到您的網站中：

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 套件是增強網站導航的簡單而有效的方法。無論您正在處理文件還是任何其他內容豐富的項目，此工具都有助於使事情井井有條且用戶友好。我希望你發現它和我一樣有用！

Unsplash 上 Patrick Hendry 的封面照片

以上是在 React 中觀察目標位置：無縫滾動偵測和動態內容樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！