Link

Examples

• Git Repository

  View Source

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

• 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>
    )
  }

  Expand code

• 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>
    )
  }

  Expand code

• Config Links

  View Source

  • Repository
  • Owner
  • Branch
  • New Issue
  • renoun@10.11.0

  import { Link } from 'renoun'
  
  export function ConfigLinks() {
    return (
      <ul>
        <li>
          <Link variant="repository">Repository</Link>
        </li>
        <li>
          <Link variant="owner">Owner</Link>
        </li>
        <li>
          <Link variant="branch" options={{ ref: 'release' }}>
            Branch
          </Link>
        </li>
        <li>
          <Link variant="issue">New Issue</Link>
        </li>
        <li>
          <Link variant="release">
            {({ href, label }) => <a href={href}>{label}</a>}
          </Link>
        </li>
      </ul>
    )
  }

  Expand code

API Reference