useIntentTarget

useIntentTarget はボタン、カード、その他の HTML 要素にインテント検出を追加します。返された ref を観測したい要素に取り付けます。

基本的な使い方

クライアントコンポーネント内で hook を使い、返された ref を1つの HTML 要素に取り付けます。

"use client"

import { useIntentTarget } from "intent-link"

export function PreviewButton() {
  const intentRef = useIntentTarget<HTMLButtonElement>({
    onIntent: () => preloadProductPreview(),
  })

  return <button ref={intentRef}>Preview product</button>
}

オプション

onIntent: 要素が有力なターゲットになったときに実行する処理。
importance: 省略可能な high、medium、low。既定値: medium。
cost: 省略可能な high、medium、low。既定値: low。

サードパーティ製コンポーネント

コンポーネントが実際の HTML 要素へ ref を転送する場合は、直接取り付けます。

const intentRef = useIntentTarget<HTMLDivElement>({
  onIntent: () => prepareCarousel(),
})

return <ThirdPartyCarousel ref={intentRef} />

ref を転送しない場合はネイティブ要素で囲み、そのラッパーに ref を取り付けます。

const intentRef = useIntentTarget<HTMLDivElement>({
  onIntent: () => prepareCarousel(),
})

return (
  <div ref={intentRef}>
    <ThirdPartyCarousel />
  </div>
)