The Link component

Let's allow editors to create links

Sometimes you want editors to be able to create links within a RichText.

To enable the link rich-text feature, you just need to add the types.RichTextFeatures.Link to the allowedFeatures.

Thumbnail.tsx

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

  // ...

  <RichText
    propName="description"
    value={description}
    renderBlock={({ children }) => (
      <p className="text-lg text-gray-500">{children}</p>
    )}
    placeholder="Type a description"
    allowedFeatures={[
      types.RichTextFeatures.Bold,
      types.RichTextFeatures.Highlight,
      types.RichTextFeatures.Link, 
    ]}
    renderHighlight={({ children }) => (
      <span className="px-1 rounded bg-blue-200 text-blue-900">
        {children}
      </span>
    )}
  />

Underneath, React Bricks will use the Link component from the library.

Advantages of the Link component

The Link component has many advantages over a normal anchor tag (or even a link component from the chosen React framework).

If the provided "href" is an internal link (something like/about-us`), it will render the local link (for example the Next.js link for a Next.js starter).
If the provided "href" is an external link (something likehttps://...), it will render a normal <a> tag.
On the Admin interface, it will not trigger the navigation when you click over it. In this way you can edit the link text without navigating away. On the frontend (or preview), of course the link is working as expected.
It can be rendered in a visually editable RichText: in that case, when you apply the "link" from the rich text menu, a popup opens to let the user choose the URL and if the link should open in a new tab/window.
If the editor chooses to open the link in a new tab from the interface, React Bricks will not just add the target="_blank", but also the rel="noopener" automatically, for security reasons (see the "noopener" HTML reference).

Styling the link

Since we are using Tailwind CSS for this tutorial, and Tailwind doesn't apply any default style to a link, we need to provide a custom render function to make the link visible.

In the renderLink function we'll use the <Link> component:

Thumbnail.tsx

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

  //...

  <RichText
    propName="description"
    value={description}
    renderBlock={({ children }) => (
      <p className="text-lg text-gray-500">{children}</p>
    )}
    placeholder="Type a description"
    allowedFeatures={[
      types.RichTextFeatures.Bold,
      types.RichTextFeatures.Highlight,
      types.RichTextFeatures.Link,
    ]}
    renderHighlight={({ children }) => (
      <span className="px-1 rounded bg-blue-200 text-blue-900">
        {children}
      </span>
    )}

    renderLink={({ children, href, target, rel }) => (
      <Link
        href={href}
        target={target}
        rel={rel}
        className="text-sky-500 hover:text-sky-600 transition-colors"
      >
        {children}
      </Link>
    )}
  />

Docs reference

» The Link component

Other uses of the Link component

You will use the Link component also when you you want to render a visually editable link outside of a RichText, for example a "button-like" brick, like in the code below.

Button.tsx

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

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: 'Submit',
  }),

  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

Hint

In this code example you see also the use of a sidebar control to set the link path, using the sideEditProp property. Don't consider that part of the code now: we'll discover sidebar controls soon, and then you could come back to fully understand the code.

# Time to get points

If you need to render a link in a brick, the best way to do it is

« Prev Next »