Built-in components

Basic components

Contentful offers built-in basic components, including Heading, Text, Rich Text, Image, Button, and Divider, which are enabled by default. If needed, you can disable these components using the defineComponents function when registering custom components.

Enable all basic components

All built-in basic components are enabled by default when you call the defineComponents function and do not provide the enabledBuiltInComponents option in the optional second parameter.

1import { defineComponents } from '@contentful/experiences-sdk-react';
2
3defineComponents(
4  [
5    // Register components here...
6    // {
7    //   component: Example,
8    //   definition: exampleDefinition,
9    // }
10  ]
11);

Enable specific basic components

To enable only specific built-in components, pass an array of their IDs to enabledBuiltInComponents.

In the example below, all built-in components except the Image component are enabled:

1import { defineComponents, CONTENTFUL_COMPONENTS } from '@contentful/experiences-sdk-react';
2
3defineComponents(
4  [
5    // Register components here...
6    // {
7    //   component: Example,
8    //   definition: exampleDefinition,
9    // }
10  ],
11  {
12    enabledBuiltInComponents: [
13      CONTENTFUL_COMPONENTS.button.id,
14      CONTENTFUL_COMPONENTS.divider.id,
15      CONTENTFUL_COMPONENTS.heading.id,
16      CONTENTFUL_COMPONENTS.richText.id,
17      CONTENTFUL_COMPONENTS.text.id,
18    ],
19  }
20);
The Image component is disabled in this example because its ID (CONTENTFUL_COMPONENTS.image.id) is not included in the enabledBuiltInComponents array.

Disable all basic components

To disable all built-in basic components, pass an object with enabledBuiltInComponents set to an empty array as the second parameter to defineComponents.

1import { defineComponents } from '@contentful/experiences-sdk-react';
2
3defineComponents(
4  [
5    // Register components here...
6    // {
7    //   component: Example,
8    //   definition: exampleDefinition,
9    // }
10  ],
11  {
12    enabledBuiltInComponents: [],
13  }
14);