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.
tsimport {useLinkComponent} from '@astryxdesign/core/Link'
Best practices
| Guidance | Practices |
|---|---|
| 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
| Param | Type | Description |
|---|---|---|
as | Component to render the link with, such as a router's link or 'a'. When set it wins over any LinkProvider. |
Returns
| Field | Type | Description |
|---|---|---|
| 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.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.bashnpx shadcn@4.19.0 add https://astryx-8ofveaprv-fbopensource.vercel.app/shadcn/hooks/use-link-component.json