Component wrapper

Table of contents

• Component wrapper
  • Disable the wrapping container
  • Change the wrapping container tag
  • Change the wrapping container width

Component wrapper

Components registered with the Experiences SDK are encapsulated within a <div> element that acts as a wrapping container.

Styles generated by Experiences are applied to this wrapping container rather than the component itself, preventing additional styles from interfering with your component's styling.

If you prefer styles from the Experiences UI to be applied directly to your component, you can disable the wrapping container.

Disable the wrapping container

You can disable the wrapping container by setting the wrapComponent option to false during component registration.

If you choose to disable the container, ensure your component handles the required props for Experiences as described in component requirements.

import { defineComponents } from '@contentful/experiences-sdk-react';
import { Example, exampleDefinition } from './components/Example';

defineComponents([
  {
    component: Example,
    definition: exampleDefinition,
    options: {
      wrapComponent: false
    }
  }
]);

Change the wrapping container tag

The wrapping container tag can be changed by setting the wrapContainer option in the component registration.

import { defineComponents } from '@contentful/experiences-sdk-react';
import { Example, exampleDefinition } from './components/Example';

defineComponents([
  {
    component: Example,
    definition: exampleDefinition,
    options: {
      wrapContainer: 'span'
    }
  }
]);

Change the wrapping container width

The wrapping container width can be changed by setting the wrapContainerWidth option in the component registration.

This option is useful for custom components that use CSS to define a relative width, rather than allowing editors to modify the component's width in the Experiences canvas.

import { defineComponents } from '@contentful/experiences-sdk-react';
import { Example, exampleDefinition } from './components/Example';

defineComponents([
  {
    component: Example,
    definition: exampleDefinition,
    options: {
      wrapContainerWidth: '100%'
    }
  }
]);