useLinkComponent@astryxdesign/core v0.7.9 · useLinkComponent

Usage

Resolves which component renders a link, so a custom component's links follow the app's router the same way Astryx's own links do. The order is the as argument, then the nearest LinkProvider's component, then a native anchor. Render the returned component with href (and to, for a router that reads it). Before rendering it checks both destinations under the Link href rule: a rejected destination renders an anchor with no destination, and a custom router is never invoked with it. A custom component receives to={href} unless to is passed explicitly.

ts
import {useLinkComponent} from '@astryxdesign/core/Link'

Best practices

GuidancePractices
Do

Use it for links inside a custom component, so a LinkProvider wired to the router reaches them without a prop on every link.

Do

Pass as='a' for a destination the router cannot handle, such as a file download or a page outside the app.

Don't

Import the router's link directly in a shared component; the component then ignores LinkProvider and the destination check.

Parameters

ParamTypeDescription
as

Component to render the link with, such as a router's link or 'a'. When set it wins over any LinkProvider.

Returns

FieldTypeDescription
LinkComponent

The resolved component: as, else the nearest LinkProvider's component, else a native 'a'. It is stable while the resolved component is the same. It checks href and to under the Link href rule before rendering; when either is rejected it renders an anchor with no destination and never invokes the router. A custom component receives to={href} unless an explicit to is passed.

Examples

Common configurations, variations, and states.
useLinkComponent — Article Cards
Open in Playground

A custom Article card renders its title link with the component useLinkComponent resolves: the as prop first, then the nearest LinkProvider, then a native anchor. Inside a LinkProvider wired to a client-side router, the title navigates without a page load and updates the router location. With as="a" the title is a native anchor even inside the provider, and outside the provider it falls back to the next provider up or a native anchor.

Use with shadcn

Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx.

This install URL expires with the draft preview.
bash
npx shadcn@4.19.0 add https://astryx-dj8xxnkaq-fbopensource.vercel.app/shadcn/hooks/use-link-component.json