The Link component

The Link component simplifies the management of links, both standalone and within RichText fields.

When you enable Links in a RichText without customizing the render function, a Link component is automatically used to render links.

Link Component vs. Standard Anchor

1. The Link component utilizes the framework’s Link (e.g., Next.js Link) for local paths, while rendering a standard <a> tag for absolute URLs
2. In the Editor interface, the Link component doesn’t trigger a link when clicked, allowing easy text editing within a link using a <Text> component.

Standalone Usage Example

Button.tsx

import { Text, Link, types } from 'react-bricks/frontend'

interface ButtonProps {
  buttonText: types.TextValue
  buttonPath: string
}

const Button: types.Brick<ButtonProps> = ({ buttonText, buttonPath }) => {
  return (
    <Link
      href={buttonPath}
      className="py-2 px-6 text-white text-center bg-sky-500"
    >
      <Text
        propName="buttonText"
        value={buttonText}
        placeholder="Action"
        renderBlock={({ children }) => <span>{children}</span>}
      />
    </Link>
  )
}

Button.schema = {
  name: 'button',
  label: 'Button',

  getDefaultProps: () => ({
    buttonText: 'Learn more',
  }),

  sideEditProps: [
    {
      name: 'buttonPath',
      label: 'Path or URL',
      type: types.SideEditPropType.Text,
      validate: (value) =>
        value?.startsWith('/') ||
        value?.startsWith('https://') ||
        'Please, enter a valid URL',
    },
  ],
}

export default Button

Usage inside a RichText

import { Link } from 'react-bricks/frontend'

// ...
<RichText
  propName="description"
  value={description}
  renderBlock={({ children }) => (
    <p className="text-lg text-gray-500">{children}</p>
  )}
  placeholder="Type a description"
  allowedFeatures={[types.RichTextFeatures.Link]}
  renderLink={({ children, href, target, rel }) => (
    <Link
      href={href}
      target={target}
      rel={rel}
      className="text-sky-500 hover:text-sky-600 transition-colors"
    >
      {children}
    </Link>
  )}
/>

When editors opt to open a link in a new tab through the link popup interface, the attributes target="_blank" and rel="noopener" are automatically applied.

Properties

interface LinkProps {
  href: string
  target?: string
  rel?: string
  className?: string
}

Properties Definition

Property	Definition
href	The URL for an external link or the local path for a local link.
target	The target for the external link (for example “_blank”).
rel	The “rel” for the external link (for example “noopener”).
className	CSS class to be applied to the link tag.

The Link component also spreads {...rest} properties on the link tag or framework’s Link component.

Usage with Server Components

When working with Server Components, you need to import from 'react-bricks/rsc':

import { types, Link, RichText } from 'react-bricks/rsc'