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>
)