Custom Intent Components

If your application has many targets of the same kind, wrap useIntentTarget once and reuse the resulting component.

Reusable IntentButton

This component accepts normal button props together with onIntent, importance, and cost.

"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>
  );
}

Usage

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

Reusable IntentArticle

The same pattern works for product cards and other semantic containers.

"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>
  );
}

Usage

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