useIntentTarget

useIntentTarget adiciona detecção de intenção a um botão, cartão ou qualquer outro elemento HTML. Anexe a ref retornada ao elemento que deseja observar.

Uso básico

Chame o hook em um componente cliente e anexe a ref retornada a um 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>
}

Opções

• onIntent: o trabalho executado quando o elemento se torna um alvo provável.
• importance: high, medium ou low, opcional. Padrão: medium.
• cost: high, medium ou low, opcional. Padrão: low.

Componentes de terceiros

Se o componente encaminha a ref para um elemento HTML real, anexe-a diretamente.

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

return <ThirdPartyCarousel ref={intentRef} />

Se ele não encaminha refs, envolva-o em um elemento nativo e anexe a ref ao envoltório.

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

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