Link

An anchor element that derives its href from a directory, file, module export, or from the RootProvider config.

import { Link } from 'renoun'

export async function BasicUsage() {
  return (
    <Link
      variant="repository"
      css={{ display: 'flex', width: '1.5rem', height: '1.5rem' }}
    />
  )
}

The Link component is an anchor element that derives its href from a directory, file, or module export, or from the RootProvider config.

It supports the following variants:

Variants

  • source , edit , history , raw , blame , editor
  • gitHost , repository , owner , branch , issue

Examples

  • View Source

    View Source
    View Source
    import { Link, JavaScriptFile } from 'renoun'

const file = new JavaScriptFile({
  path: '../../packages/renoun/src/components/Link/Link.tsx',
})

export function ViewSource() {
  return (
    <Link source={file} variant="source">
      View Source
    </Link>
  )
}

  • Git Repository Custom

    View Source
    View Repository
    import { Link, Logo } from 'renoun'

export function GitRepositoryCustom() {
  return (
    <Link
      variant="repository"
      css={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
    >
      <Logo variant="gitHost" width="1em" height="1em" />
      <span>View Repository</span>
    </Link>
  )
}

  • Custom Element

    View Source
    Edit Source
    import { Link, JavaScriptFile } from 'renoun'

const file = new JavaScriptFile({
  path: '../../packages/renoun/src/components/Link/Link.tsx',
})

export async function CustomElement() {
  return (
    <Link source={file} variant="edit">
      {(href) => <a href={href}>Edit Source</a>}
    </Link>
  )
}

API Reference

Last updated