Using the Content Component

The Content component from Builder's Gen 2 SDK is how you specify where in your app you want to feature Builder content. It offers a number of props to help you specify exactly what to render in your integrated app.

Required usage

When using Content you must specify:

model
apiKey
content

The following is an example of using these required props with Content:

<Content 
  model="page" 
  apiKey=YOUR_API_KEY
  content={contentJson}
 />

Props

Props are vital for customizing component behavior and managing content. With Content props, you can define how the component interacts with Builder, control content sources, and pass necessary data or context.

Required props

`model`

required

Use to specify the name of the Builder model whose content this component is rendering. This is often a Page or Section model. If you had a model named announcement-bar, for example, you'd pass that in. In this example, the model is page.

<Content model="page" />

For more information, visit Introduction to Models.

`apiKey`

required

The API key for your Builder.io account, required for fetching content.

<Content model="page" apiKey=YOUR_API_KEY />

For more information, visit Using Builder API Keys.

`content`

required

Explicitly specify the Builder content JSON object to render. Helpful for server-side rendering or custom content logic.

<Content model="page" content={ContentJSON} />

For more information, visit Content API.

Optional props

`context`

optional

Pass the context you want to pass to the Content component.

<Content context={myContext} />

`canTrack`

optional

A boolean to enable or disable tracking. Defaults to true.

<Content canTrack={true} />

`customComponents`

optional

Use to register custom components.

<Content customComponents={myCustomComponent} />

For more information, visit Registering Custom Components.

`data`

optional

Additional data to inject into your Builder content.

<Content data={{ key1: 'value1', key2: 'value2' }} />

For more information, visit Custom Data and Context.

`enrich`

optional

A boolean to enable or disable enriching API content. Enriching includes multi-level references in the response. Defaults to false.

<Content enrich={true} />

For more information, visit Fetching Content with enrich={true}.

`blocksWrapper`

optional

The element that wraps blocks. Defaults to div (ScrollView in React Native).

<Content blocksWrapper="article" />

`blocksWrapperProps`

optional

Additonal props to pass to blocksWrapper. Defaults to {}.

<Content blocksWrapperProps={{ id: 'blocks-wrapper'}} />

`contentWrapper`

optional

Defines the wrapping element for the content. Defaults to div (ScrollView in React Native).

<Content contentWrapper="section" />

`contentWrapperProps`

optional

Additional props to pass to the contentWrapper element. Defaults to {}. As a best practice, be explicit regarding the element you'd like to apply contentWrapperProps with and use contentWrapper with contentWrapperProps.

The example below renders the content within a section element with the class name my-content.

<Content 
  contentWrapper="section" 
  contentWrapperProps={{ className: 'my-content'}}
/>

You can pass many other properties besides className. The contentWrapperProps prop is designed to accept a range of HTML attributes and custom properties that you might want to apply to the contentWrapper element.

The properties you can use depend on the type of contentWrapper element. For standard HTML elements, you can use any valid HTML attribute or React event handler. Some examples include:

<!-- style for inline styles -->
<Content 
  contentWrapper="div" 
  contentWrapperProps={{ style: { color: 'blue', fontSize: '16px' } }} />

<!-- specifying ARIA attributes for accessibility -->
<Content 
  contentWrapper="div" 
  contentWrapperProps={{ 'aria-label': 'Main Content' }} />

<!-- Adding event handlers -->
<Content 
  contentWrapper="div" 
  contentWrapperProps={{ onClick: () => console.log('Clicked!') }} />

There are numerous properties you can pass with contentWrapperProps depending on your individual use case. For more information, visit MDN's HTML Attribute Reference.

`locale`

optional

Sets the locale for content rendering.

<Content locale="en-CA" />

For more information, visit Introduction to Localization.

`linkComponent`

optional

Provides a custom component for handling links throughout your Builder content. This prop is important for supporting client-side routing, preventing full Page reloads when navigating between Builder Pages.

The linkComponent provides a custom component for links for the Button component when provided a link, the Link URL field for any block, and the Link field for a column within the Columns block.

Here is an example for React:

// React example
function CustomLink(props) {
  return <a {...props} />
}

Here's a Next.js example:

// Next.js example
import Link from 'next/link'

function CustomLink(props) {
  return <Link {...props} />
}

Then use it in the Content component:

<!-- Usage -->
<Content linkComponent={CustomLink} />

Your custom link can receive all attributes that an HTML anchor tag, <a>, can receive, with href and target being the most common.

The linkComponent is equivalent to the renderLink prop in Gen 1 SDKs. For details, visit the renderLink entry in Using BuilderComponent.

What's next

For more information on fetching content, visit Content API.

Was this article helpful?