Skip to content
Twilight React Playground
ثيم رائدaren

useLinkAdapter

hookAdvancedlive demo

Returns the anchor component the nearest LinkProvider supplies, and throws LinkProviderError when there is no provider above.

import { useLinkAdapter, LinkProviderError } from '@salla.sa/twilight-theme-engine/providers';

In plain words

The engine's Link calls useLinkAdapter() to find the real anchor component. Call it yourself when a component needs that anchor directly, with its own props.

With no LinkProvider above, it throws a LinkProviderError whose message says what to fix.

Signature

function useLinkAdapter(): LinkAdapter   // React.ComponentType<LinkProps>

class LinkProviderError extends Error {
  constructor();
  // name: 'LinkProviderError'
  // message: 'Link component must be used within LinkProvider. Ensure TwilightProvider
  //           is configured with client.framework option.'
}

Try it live

The adapter this page’s LinkProvider supplies, rendered directly. On a theme it is TanStack Router’s Link, wrapped.Try this: pick a destination and click: it is a client-side navigation, with the locale added for you.
Storefront canvas · en · LTR

useLinkAdapter() → TanStackLinkAdapter

Open /playground/reference/core through the adapter

Outside a LinkProvider the hook throws LinkProviderError: “Link component must be used within LinkProvider. Ensure TwilightProvider is configured with client.framework option.”

Controls
What a theme writes
import type { ReactNode } from 'react';
import { useLinkAdapter } from '@salla.sa/twilight-theme-engine/providers';

// A menu item that must render the router's own anchor, with its own props.
export function MenuLink({ to, children }: { to: string; children: ReactNode }) {
  const Anchor = useLinkAdapter();
  return (
    <Anchor to={to} preload="intent" className="menu-link">
      {children}
    </Anchor>
  );
}

// <MenuLink to="/playground/reference/core">…</MenuLink>

Example

app/components/MenuLink.tsx
import type { ReactNode } from 'react';
import { useLinkAdapter } from '@salla.sa/twilight-theme-engine/providers';

export function MenuLink({ to, children }: { to: string; children: ReactNode }) {
  const Anchor = useLinkAdapter();
  return (
    <Anchor to={to} preload="intent" className="menu-link">
      {children}
    </Anchor>
  );
}

How it behaves

  • Link from /components/common is useLinkAdapter() plus prop defaults, so it throws the same error in the same places.

Gotchas

  • Places with no LinkProvider in a working theme: TwilightProvider's skeleton (rendered before the navigation setup), anything under client={false}, and component tests rendered without a provider.

Related

LinkProvider

Tells the engine's Link which real anchor component to render; TwilightProvider supplies TanStack Router's, and tests can supply a plain one.

createLinkWithAdapter

Builds a link component bound to one adapter, which renders without any LinkProvider above it.

Source and docs