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 | unionPossible values:string , LocationDescriptor | ✅ | | The URL that the Link should point to. | | tone | unionPossible values:'primary' , 'inverted', 'secondary' | | 'primary' | Color of the link | | onClick | FunctionSee signature. | | | Handler when the link is clicked. |

Signatures

Signature onClick

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