The Link component

Behind the scenes, the WYSIWYG text editor uses a Link component to render links.

This component renders a normal <a> tag for external links and uses the renderLocalLink function from the configuration to render internal links, so that they leverage your React framework's router.

As we saw in RichText, for each RichText component, you may replace the Link component with any component you want, by setting the renderLink prop.

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.

It also spreads {...rest} properties on the link tag

Usage example

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

Use without RichText

Sometimes you may want to use the <Link> component directly, for example if your block renders a button-like link where the path or external URL must be provided from a sidebar prop.

Example

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