Pass renderAnchor to swap the element to a framework-specific anchor (e.g. Next.js Link, react-router Link). Spread all received props onto the replacement element.
childrenReactNodehrefTopenInNewTab?booleanfalserenderAnchor?(props: RenderAnchorProps<T>) => ReactNodedefaultRenderAnchor| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
href | T |
openInNewTab? | boolean | false |
renderAnchor? | (props: RenderAnchorProps<T>) => ReactNode | defaultRenderAnchor |
import { Anchor } from '@k8ordo/ui';<Anchor href="https://example.com" openInNewTab>
External Link
</Anchor><Anchor href="#">
Same Tab Link
</Anchor>
<Anchor href="https://example.com" openInNewTab>
New Tab Link
</Anchor>// Swap in the Next.js Link
import Link from 'next/link';
<Anchor
href="/about"
renderAnchor={({ children, ...rest }) => (
<Link {...rest}>{children}</Link>
)}
>
About
</Anchor>