useIntentTarget

useIntentTarget 可为按钮、卡片或任何其他 HTML 元素添加意图检测。把返回的 ref 附加到需要观察的元素。

基本用法

在客户端组件中调用 hook，并把返回的 ref 附加到一个 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。

第三方组件

如果组件会把 ref 转发到真实 HTML 元素，可直接附加。

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

return <ThirdPartyCarousel ref={intentRef} />

如果它不转发 ref，请用原生元素包装它，并把 ref 附加到包装元素。

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

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