useIntentTarget

useIntentTarget adds intent detection to a button, card, or other HTML element. It returns a ref; attach that ref to the element you want to observe.

Basic usage

Use the hook inside a client component and attach the returned ref to one HTML element.

"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: the action to run when the element becomes the likely target.
• importance: optional high, medium, or low. Default: medium.
• cost: optional high, medium, or low. Default: low.

Third-party components

Attach the ref directly when the component forwards its ref to an HTML element.

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

return <ThirdPartyCarousel ref={intentRef} />

If it does not forward a ref, wrap it in a native element and attach the ref to the wrapper.

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

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