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

createLinkWithAdapter

functionAdvanced

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

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

In plain words

Sometimes a link must render the same way whatever provider is, or is not, above it: in an isolated widget or a test. createLinkWithAdapter(adapter) returns such a component.

Signature

function createLinkWithAdapter(adapter: LinkAdapter): React.ComponentType<LinkProps>

Example

app/components/RouterLink.tsx
import { createLinkWithAdapter } from '@salla.sa/twilight-theme-engine/providers';
import { TanStackLinkAdapter } from '@salla.sa/twilight-theme-engine/tanstack';

// Always TanStack Router's anchor, even where no LinkProvider is mounted.
export const RouterLink = createLinkWithAdapter(TanStackLinkAdapter);

How it behaves

  • The returned component is (props) => createElement(adapter, props): unlike the engine Link, it does not default to from href and does not add data-spa-link.

  • It is a plain function component, not forwardRef. On React 19, which passes ref as an ordinary prop, a ref still reaches the adapter.

Gotchas

  • TanStackLinkAdapter reads the router's locale param, so a link bound to it still needs a TanStack router above it, even without a LinkProvider.

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.

useLinkAdapter

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

Source and docs