import { Canvas, Meta, Source, Story } from '@storybook/addon-docs/blocks';
import Link from 'components/Link';

<Meta title="Components API/Link" component={Link} />

# Link

Links to another page within the app or to an external page.

<Canvas>
  <Story name="Link">
    <Link href="https://home.castingworkbook.com">Link to another page!</Link>
  </Story>
</Canvas>

<Source code="import { Link } from 'cwb-react';" />

## Usage

Links are used in the same way as `<a>`s.

<Source
  code={`<Link href="https://home.castingworkbook.com">Click here!</Link>`}
/>

By default, Links are used to route to external pages. In order to route internally, you should render the Link as a react-router-dom Link.

<Source
  code={
    `import { Link as ReactRouterLink } from 'react-router-dom';\n` +
    '\n' +
    '<Link as={ReactRouterLink} to="/my-page">Click here!</Link>'
  }
/>

## Props

Links are simply styled `<a>` tags, so any prop given is passed down directly. When given the `as` prop (e.g. rendering a react-router-dom [Link](https://reactrouter.com/web/api/Link)), you should treat Link as the target component and pass props accordingly.