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, sometimes you just need to add the types.RichTextFeatures.Link to the allowedFeatures.

<RichText ... allowedFeatures={[ types.RichTextFeatures.Link ]} />

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

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/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: '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