Link Provider — Custom Link Component
Routes every Astryx link through a custom component that intercepts the click, the hook frameworks like Next.js use for client-side navigation. Click the link to see the custom handler fire instead of a full-page load.
Preview loads on approachPreview loads on approach
Exact source · link-provider-custom-link
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import type {AnchorHTMLAttributes} from 'react';
import {Link, LinkProvider} from '@astryxdesign/core/Link';
/**
* A stand-in for a framework router link (e.g. Next.js `Link` or React
* Router `Link`). Instead of letting the browser do a full-page navigation,
* it intercepts the click and hands the destination to a custom handler —
* the same hook real routers use for client-side navigation. Here it just
* announces the target so the behavior swap is observable in the preview.
*/
function RouterLink({
href,
onClick,
children,
...props
}: AnchorHTMLAttributes<HTMLAnchorElement>) {
return (
<a
href={href}
onClick={e => {
e.preventDefault();
onClick?.(e);
alert(`RouterLink intercepted navigation to: ${href}`);
}}
{...props}>
{children}
</a>
);
}
export default function LinkProviderCustomLink() {
return (
<LinkProvider component={RouterLink}>
<Link href="/dashboard" isStandalone>
Go to dashboard
</Link>
</LinkProvider>
);
}