@commercetools-uikit/link

Link

Description

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.

Installation

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

Usage

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;

Properties

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-routers <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.

Signatures

Signature onClick

(
  event: MouseEvent<HTMLLinkElement> | KeyboardEvent<HTMLLinkElement>
) => void