useIntentTarget

useIntentTarget añade detección de intención a un botón, tarjeta u otro elemento HTML. Devuelve una ref; conéctala al elemento que quieras observar.

Uso básico

Usa el hook dentro de un componente cliente y conecta la ref devuelta 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>
}

Opciones

• onIntent: la acción que se ejecuta cuando el elemento se convierte en el objetivo probable.
• importance: high, medium o low opcional. Predeterminado: medium.
• cost: high, medium o low opcional. Predeterminado: low.

Componentes de terceros

Conecta la ref directamente cuando el componente reenvía su ref a un elemento HTML.

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

return <ThirdPartyCarousel ref={intentRef} />

Si no reenvía una ref, envuélvelo en un elemento nativo y conecta la ref al contenedor.

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

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