Skip to content

Latest commit

 

History

History
47 lines (41 loc) · 1.63 KB

readme.md

File metadata and controls

47 lines (41 loc) · 1.63 KB

TextLink

A replacement for the native <a> and the react-router-dom <TextLink>-component with a11y friendly interaction styles.

Usage

<TextLink to="/users">
  I am an internal link
</TextLink>
<TextLink target="_blank" rel="noopener noreferrer" href="https://folio.org">
  I am an external link
</TextLink>
<TextLink element="button" onClick={() => doSomething()}>
  I am a button element!
</TextLink>

Props

Name Type Description
children node, func The content of the component. Function form takes the root className as an argument; see below
className string Adds a class name to the component
element string, func Uses a custom element via tag name or component
to string The path to a page. This renders the react-router-dom <Link>-component internally.
href string The url for a web page. Renders a native <a>. Use the to-prop for routing.

Additional props are passed onto the root element of the component. This component also supports passing a ref and the ability to apply a root CSS class to the child element.

To pass the root CSS class to the child element, pass a render function as the child. This change was made to ensure correct inheritance of styles, especially in cases where the children are inline elements with display: inline-flex, and the underline is not inherited.

// In the case that direct style application is required, a child function can be used.
<TextLink to="/users" ref={yourRefCallback}>
  {({ className }) => (
    <span className={className}>
      I am an internal link with custom styles
    </span>
  )}
</TextLink>