useIntentTarget

useIntentTarget aggiunge il rilevamento dell’intento a un pulsante, una scheda o qualsiasi altro elemento HTML. Collega il ref restituito all’elemento che vuoi osservare.

Utilizzo di base

Chiama l’hook in un componente client e collega il ref restituito a un elemento HTML.

"use client"

import { useIntentTarget } from "intent-link"

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

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

Opzioni

• onIntent: il lavoro da eseguire quando l’elemento diventa un obiettivo probabile.
• importance: valore facoltativo high, medium o low. Predefinito: medium.
• cost: valore facoltativo high, medium o low. Predefinito: low.

Componenti di terze parti

Se il componente inoltra il ref a un vero elemento HTML, collegalo direttamente.

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

return <ThirdPartyCarousel ref={intentRef} />

Se non inoltra i ref, avvolgilo in un elemento nativo e collega il ref all’elemento contenitore.

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

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