useIntentTarget

يضيف useIntentTarget استشعار النية إلى زر أو بطاقة أو أي عنصر HTML آخر. اربط ref المُعاد بالعنصر الذي تريد مراقبته.

الاستخدام الأساسي

استدعِ hook داخل مكوّن عميل، واربط ref المُعاد بعنصر HTML واحد.

"use client"

import { useIntentTarget } from "intent-link"

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

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

الخيارات

onIntent: العمل الذي يُشغّل عندما يصبح العنصر هدفاً مرجحاً.
importance: قيمة اختيارية من high أو medium أو low. الافتراضي: medium.
cost: قيمة اختيارية من high أو medium أو low. الافتراضي: low.

مكوّنات الطرف الثالث

إذا كان المكوّن يمرر ref إلى عنصر HTML حقيقي، فاربطه مباشرة.

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

return <ThirdPartyCarousel ref={intentRef} />

إذا كان لا يمرر refs، فأحطه بعنصر أصلي واربط ref بالعنصر المحيط.

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

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