Custom components

Table of contents

• Overview
• Component requirements
• Example custom component
• Register custom components

Overview

You can import your own design system components into Experiences to create on-brand digital experiences. After the setup in Contentful is completed, you can open the experience entry in the Contentful web app to see the canvas view with your page rendered in an iframe.

Component requirements

By default, a component wrapper is used to attach the necessary props to your components.

If you disable the wrapping container using the wrapComponent option in the component registration options, your registered component must handle the following props to fully support Experiences:

• className property, to enable Experiences to apply styles to the instance of a registered component.
• onMouseDown, onClick props (Experiences prevents native click events to avoid unnecessary redirects).
• The following props which enable canvas interactions to function properly:
  • data-cf-node-id
  • data-cf-node-block-id
  • data-cf-node-block-type

As the product evolves, the list of required props may change. Therefore, it is recommended to register components that support props spreading (e.g., experienceProps) as shown in the example custom component below.

Example custom component

This example demonstrates a custom button component that defines text and variant properties:

• The text property enables content binding for the button's text.
• The variant property allows for styling the button.

It also shows how to support props spreading with experienceProps. The example imports a Button from Contentful's Forma36 library, but custom components can import from other React component libraries or design systems, too.

// src/components/Button.tsx

import React from 'react';
import { Button as F36Button } from '@contentful/f36-components';

type Props = {
  text: string;
  variant: 'primary' | 'secondary';
};

export const Button: React.FC<Props> = ({ text, variant, ...experienceProps }) => {
  return (
    <F36Button variant={variant} {...experienceProps}>
      {text}
    </F36Button>
  );
};

Register custom components

To use custom components in Experiences, you need to register them. See the register custom components guide for more information.