Özel Intent bileşenleri

Aynı türden çok sayıda hedefiniz varsa useIntentTarget işlevini bir kez sarın ve oluşan bileşeni yeniden kullanın.

Yeniden kullanılabilir IntentButton

Normal düğme prop’larının yanı sıra onIntent, importance ve cost kabul eder.

"use client";

import type { ButtonHTMLAttributes } from "react";
import {
  useIntentTarget,
  type UseIntentTargetOptions,
} from "intent-link";

type IntentButtonProps =
  ButtonHTMLAttributes<HTMLButtonElement> &
  UseIntentTargetOptions;

export function IntentButton({
  onIntent,
  importance,
  cost,
  children,
  ...buttonProps
}: IntentButtonProps) {
  const intentRef = useIntentTarget<HTMLButtonElement>({
    onIntent,
    importance,
    cost,
  });

  return (
    <button ref={intentRef} {...buttonProps}>
      {children}
    </button>
  );
}

Kullanım

<IntentButton
  className="preview-button"
  onIntent={preloadPreview}
>
  Preview
</IntentButton>

Yeniden kullanılabilir IntentArticle

Aynı yaklaşım ürün kartları ve diğer anlamsal kapsayıcılar için de çalışır.

"use client";

import type { HTMLAttributes } from "react";
import {
  useIntentTarget,
  type UseIntentTargetOptions,
} from "intent-link";

type IntentArticleProps =
  HTMLAttributes<HTMLElement> &
  UseIntentTargetOptions;

export function IntentArticle({
  onIntent,
  importance,
  cost,
  children,
  ...articleProps
}: IntentArticleProps) {
  const intentRef = useIntentTarget<HTMLElement>({
    onIntent,
    importance,
    cost,
  });

  return (
    <article ref={intentRef} {...articleProps}>
      {children}
    </article>
  );
}

Kullanım

<IntentArticle
  className="product-card"
  onIntent={() => preloadProduct(productId)}
>
  <ProductImage />
  <ProductDetails />
</IntentArticle>