Links are used either to link to other UI routes, or to link to external pages. This component is a very thin wrapper over either a React Router Link, or a normal HTML <a> tag.
yarn add @commercetools-uikit/link
npm --save install @commercetools-uikit/link
Additionally install the peer dependencies (if not present)
yarn add react react-intl react-router-dom
npm --save install react react-intl react-router-dom
import Link from '@commercetools-uikit/link';
const Example = () => <Link to={'/foo/bar'}>Go to foo bar</Link>;
const ExampleWithExternal = () => (
<Link isExternal={true} to={'https://kanyetothe.com'}>
Go to external link
</Link>
);
export default Example;
Props | Type | Required | Default | Description |
---|---|---|---|---|
children |
ReactNode |
Value of the link.
Required if intlMessage is not provided. |
||
intlMessage |
MessageDescriptor |
An intl message object that will be rendered with FormattedMessage .
Required if children is not provided. |
||
isExternal |
boolean |
false |
A flag to indicate if the Link points to an external source.
If true , a regular <a> is rendered instead of the default react-router s <Link />
|
|
to |
union Possible values: string , LocationDescriptor
|
✅ | The URL that the Link should point to. | |
tone |
union Possible values: 'primary' , 'inverted', 'secondary'
|
'primary' |
Color of the link | |
onClick |
Function See signature. |
Handler when the link is clicked. |
(
event: MouseEvent<HTMLLinkElement> | KeyboardEvent<HTMLLinkElement>
) => void