useIntentTarget

useIntentTarget fügt einem Button, einer Karte oder einem anderen HTML-Element Intent-Erkennung hinzu. Der Hook gibt eine Ref zurück; verbinde sie mit dem zu beobachtenden Element.

Grundlegende Verwendung

Verwende den Hook in einer Client-Komponente und verbinde die zurückgegebene Ref mit einem 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>
}

Optionen

• onIntent: die Aktion, die läuft, wenn das Element zum wahrscheinlichen Ziel wird.
• importance: optional high, medium oder low. Standard: medium.
• cost: optional high, medium oder low. Standard: low.

Drittanbieter-Komponenten

Verbinde die Ref direkt, wenn die Komponente ihre Ref an ein HTML-Element weiterleitet.

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

return <ThirdPartyCarousel ref={intentRef} />

Leitet sie keine Ref weiter, umschließe sie mit einem nativen Element und verbinde die Ref mit diesem Wrapper.

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

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