Anchor
Display links with theme styles
Import
Source
Docs
Package
Usage
Anchor is a wrapper around Text component with component prop set to a by default:
<Anchor href="https://mantine.dev/" target="_blank">Mantine docs</Anchor>
Usage with react-router and other libraries
You can use Anchor with react-router Link component and other similar components by setting component prop:
import { Link } from 'react-router-dom';import { Anchor } from '@mantine/core';function Demo() {return (<Anchor component={Link} to="/react-router">React router link</Anchor>);}
Usage with Next Link
Next Link component requires ref prop usage, however all Mantine components use elementRef,
to make Anchor and other similar components work with Next Link, create wrapper component in your components folder:
// This component can be reused in every Mantine component which supports component pass throughimport React, { forwardRef } from 'react';import Link from 'next/link';export const NextLink = forwardRef(({ href, ...others }: React.ComponentPropsWithoutRef<typeof Link>,ref: React.ForwardedRef<HTMLAnchorElement>) => (<Link href={href}>{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}<a {...others} ref={ref} /></Link>));
And then pass it to Button or other component:
<Anchor component={NextLink} href="/hello">Next Link</Anchor>
Built by Vitaly Rtishchev and these awesome people