useIntentTarget

useIntentTarget ajoute la détection d’intention à un bouton, une carte ou un autre élément HTML. Il renvoie une ref ; attachez-la à l’élément à observer.

Utilisation de base

Utilisez le hook dans un composant client et attachez la ref renvoyée à un élément HTML.

"use client"

import { useIntentTarget } from "intent-link"

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

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

Options

• onIntent : action à exécuter lorsque l’élément devient la cible probable.
• importance : high, medium ou low, facultatif. Valeur par défaut : medium.
• cost : high, medium ou low, facultatif. Valeur par défaut : low.

Composants tiers

Attachez directement la ref lorsque le composant transmet sa ref à un élément HTML.

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

return <ThirdPartyCarousel ref={intentRef} />

S’il ne transmet pas de ref, entourez-le d’un élément natif et attachez la ref à ce conteneur.

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

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