Content Component API

PageBuilder Engine <Content> is a React component specifically for fetching feature content. This is a simplified component that wraps the Consumer FetchContent API.

Implementation

The PageBuilder Engine <Content> component accepts the same attributes as the classic PageBuilder content config and uses the render props pattern to call a child function with the resolved content.

The <Content> component is imported from the fusion:content namespace. It should be used as a React Component.

Example

import React from 'react'
import PropTypes from 'prop-types'

import Content from 'fusion:content'

const MyFeatureComponent = (props) =>
  <Content {...props.customFields.myContentConfig}>
    {
      (content) => <div>{content && content.basic.headline}</div>
    }
  </Content>

MyFeatureComponent.propTypes = {
  customFields: PropTypes.shape({
    myContentConfig: PropTypes.contentConfig('some-content-schema').tag({
      group: 'Configure Content'
    })
  })
}

export default MyFeatureComponent

Since the child is expected to be a function, you may also refactor/provide a functional React component.

import React from 'react'
import PropTypes from 'prop-types'

import Content from 'fusion:content'

const Headline = (content) => <div>{content && content.basic.headline}</div>

const MyFeatureComponent = (props) =>
  <Content {...props.customFields.myContentConfig}>
    { Headline }
  </Content>

MyFeatureComponent.propTypes = {
  customFields: PropTypes.shape({
    myContentConfig: PropTypes.contentConfig('some-content-schema').tag({
      group: 'Configure Content'
    })
  })
}

export default MyFeatureComponent

Options

global

Description

In lieu of a content configuration, you may specify an attribute of global={true}. In this case, the global content for the page will be provided.

async

Description

If you specify an attribute of async={true}, the content will only be fetched/loaded in the client and not on the server.