API başvurusu / useIntentTarget

useIntentTarget

useIntentTarget, bir düğmeye, karta veya başka bir HTML öğesine niyet algılama ekler. Döndürülen ref’i izlemek istediğiniz öğeye bağlayın.

Temel kullanım

Hook’u bir istemci bileşeninde çağırın ve döndürülen ref’i tek bir HTML öğesine bağlayın.

"use client"

import { useIntentTarget } from "intent-link"

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

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

Seçenekler

  • onIntent: öğe olası bir hedef olduğunda çalıştırılacak iş.
  • importance: isteğe bağlı high, medium veya low. Varsayılan: medium.
  • cost: isteğe bağlı high, medium veya low. Varsayılan: low.

Üçüncü taraf bileşenler

Bileşen ref’i gerçek bir HTML öğesine iletiyorsa doğrudan bağlayın.

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

return <ThirdPartyCarousel ref={intentRef} />

Ref iletmiyorsa bileşeni yerel bir öğeyle sarın ve ref’i bu sarmalayıcıya bağlayın.

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

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