How to Add Custom Fields to Components

import PropTypes from 'prop-types'
import Consumer from 'fusion:consumer'
import React, { Component, Fragment } from 'react'

@Consumer
class MovieDetail extends Component {
  render () {
    const { Actors, Director, Plot, Poster, Rated, Title, Writer, Year } = this.props.globalContent

    // We can extract our custom field values here, and even set default values if desired...
    const { moviePrefix = 'Movie', showExtendedInfo = false } = this.props.customFields

    return (
      <div className='movie-detail col-sm-12 col-md-8'>
        {/* We use the `moviePrefix` value before the Title */}
        <h1><span>{moviePrefix}:</span> {Title}</h1>
        ...
        {/* we can use our boolean value `showExtendedInfo` to determine if certain data gets displayed or not */}
        {showExtendedInfo &&
          <Fragment>
            {Rated && <p><strong>Rated:</strong> {Rated}</p>}
            {Writer && <p><strong>Writer:</strong> {Writer}</p>}
            {Year && <p><strong>Year:</strong> {Year}</p>}
          </Fragment>
        }
        ...
      </div>
    )
  }
}

MovieDetail.propTypes = {
  customFields: PropTypes.shape({
    moviePrefix: PropTypes.string.isRequired,
    showExtendedInfo: PropTypes.bool
  })
}

export default MovieDetail

As you can see in the code and comments above, we defined a required moviePrefix custom field that should contain some text to prefix our movie title, and an optional showExtendedInfo field that is a boolean determining whether to show certain data in this view. These values will now be configurable in the PageBuilder Admin by editors, and we can use them just like any other data in our component to change its behavior.

...
@Consumer
class MovieDetail extends Component {
  render () {
    return (
      <div className='movie-detail col-sm-12 col-md-8'>
        {/* Invoking the `editableField` method with `moviePrefix` as the custom field it is tied to */}
        <h1><span {...this.props.editableField('moviePrefix')}>{moviePrefix}:</span> {Title}</h1>
        ...
      </div>
    )
  }
}

MovieDetail.propTypes = {
  customFields: PropTypes.shape({
    moviePrefix: PropTypes.string,
    showExtendedInfo: PropTypes.bool
  })
}

export default MovieDetail

In the above code, the <span> that contains our moviePrefix content will now be editable in the Admin Preview. When a PageBuilder editor focuses on the field and edits, whatever they type inside the <span> will be saved as the new value of the moviePrefix custom field.