Link

The Link component is not editable from the page builder.

The page selection needs to be done through the page builder settings (see link schema). The component is only used to receive the value from the settings, which is why it has no slug.

The benefit of using it is that It will prevent the click on the link and will automatically use Next.js link component under the hood if it is an internal link.

You can use the Link component in places where the layout does not allow the editor to add a link by simply selecting a text. For example on a button or other specific elements.

Property type

The Link component will interact with a LinkType property of your Block.

type LinkRelType = "nofollow" | "search" | "alternate" | "author" | "bookmark" | "external" | "help" | "license" | "next" | "noopener" | "noreferrer" | "opener" | "prev" | "tag

type LinkType = {
  target?: '_blank' | '_self' | '_parent' | '_top' | 'framename';
  rel?: LinkRelType[] | LinkRelType;
  href?: string;
};

Component properties

type LinkProps = {
  className?: string;
  style?: React.CSSProperties;
  onClick?: (e?: React.MouseEventHandler<HTMLAnchorElement>) => void;
} & LinkType;

Example

import { SuncelBlock, LinkType } from "@suncel/nextjs";
import { Link } from "@suncel/nextjs/components";

interface MyComponentProps {
  link: LinkType;
}

export const MyComponent: SuncelBlock<MyComponentProps> = ({ link }) => {
  return (
      <Link {...link} />
  );
};

Image

Custom