@navinc/base-react-components/dist/link.d.ts

Nav's Pattern Library

import { MouseEventHandler } from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import { InferComponentProps } from './types.js';
declare const StyledLink: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
    bold?: boolean;
    size?: "small" | "medium" | "large" | "regular";
    boldType?: "bold" | "regular" | "semiBold";
    $bold?: boolean;
    light?: boolean;
} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, "bold" | "light" | "size" | keyof import("react").ClassAttributes<HTMLSpanElement> | keyof import("react").HTMLAttributes<HTMLSpanElement> | "boldType" | "$bold"> & {
    bold?: boolean;
    size?: "small" | "medium" | "large" | "regular";
    boldType?: "bold" | "regular" | "semiBold";
    $bold?: boolean;
    light?: boolean;
} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, never>> & string;
type ReactRouterLinkProps = InferComponentProps<typeof ReactRouterLink>;
type LinkProps = {
    /**
     * @deprecated The \`to\` prop on BRC Link component is deprecated and support will be removed in a future version.
     * Please use \`href\` instead. If you need to bypass React Router, add a \`target="_self"\` prop to your link.`
     */
    to?: string | ReactRouterLinkProps['to'];
    href?: string | ReactRouterLinkProps['to'];
    target?: string;
    onClick?: MouseEventHandler<HTMLAnchorElement>;
    className?: string;
    bold?: boolean;
    download?: boolean;
    rel?: string;
} & InferComponentProps<typeof StyledLink>;
/**
# <Link />

The `Link` component is a Nav styled React Router Link component by default. 99% of the time, this is what we want to use.

## href

`<Link />` requires an `href` prop. This differs from the api for the React Router Link which requires a `to` prop. The `Link` component will map the `href` prop to React Router Link's `to` prop in most cases.

```jsx
<Link href="/home">Take me home</Link>
```

## target

If we find ourselves in need of a traditional anchor link, adding a standard `target` prop to the component will switch the underlying component from a React Router Link to a traditional anchor link.

A value of `_blank` will open the link in a new tab/window.

A value of `_self` will force a full page load at the specified `href` in the same window. If a link is meant to leave the app and stay in the same window, `_self` _must_ be set as the `target` value or the link will not work.

```jsx
<Link href="/full/page/reload" target="_self">
  Reload page
</Link>
```

```jsx
<Link href="https://partner-site.com" target="_blank">
  New tab
</Link>
```

## onClick

Specify a custom action to take place when the link is clicked. The `<Link />` component automatically handles tracking functionality and is configurable with props. It is not necessary to manually add a `track` call unless tracking something other than a click interaction.

 */
export declare const Link: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
    /**
     * @deprecated The \`to\` prop on BRC Link component is deprecated and support will be removed in a future version.
     * Please use \`href\` instead. If you need to bypass React Router, add a \`target="_self"\` prop to your link.`
     */
    to?: string | ReactRouterLinkProps["to"];
    href?: string | ReactRouterLinkProps["to"];
    target?: string;
    onClick?: MouseEventHandler<HTMLAnchorElement>;
    className?: string;
    bold?: boolean;
    download?: boolean;
    rel?: string;
} & InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
    bold?: boolean;
    size?: "small" | "medium" | "large" | "regular";
    boldType?: "bold" | "regular" | "semiBold";
    $bold?: boolean;
    light?: boolean;
} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, "bold" | "light" | "size" | keyof import("react").ClassAttributes<HTMLSpanElement> | keyof import("react").HTMLAttributes<HTMLSpanElement> | "boldType" | "$bold"> & {
    bold?: boolean;
    size?: "small" | "medium" | "large" | "regular";
    boldType?: "bold" | "regular" | "semiBold";
    $bold?: boolean;
    light?: boolean;
} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, never>> & string>, never>> & string & Omit<{
    ({ to, href, target, onClick, className, bold, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
}, keyof import("react").Component<any, {}, any>>;
export {};