Next.jsのLinkやreact-routerのLinkなど、フレームワーク固有のanchorコンポーネントに差し替えるにはrenderAnchorを渡してください。受け取ったpropsはすべて差し替え後の要素にスプレッドしてください。
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>