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.

서드파티 컴포넌트

컴포넌트가 실제 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>
)