Code
Code Component
Framer X

Children connectors

Overview

In our own code components, we can add the single-child connector as the one Scroll has, or the multi-children connector as the one Page has.

Single-child connector

Just need to use this.props.children in the component. For example:

class SingleChild extends React.Component {
  ...
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

Multi-children connector

In addition to the above, add this to propertyControls:

export class MultipleChildren extends React.Component<Props> {
  static propertyControls: PropertyControls = {
    children: {
      type: ControlType.Array,
      title: "Content",
      propertyControl: {
        type: ControlType.ComponentInstance,
        title: "Page"
      }
    }
  };
  ...
}

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.


download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!


© 2018 jimu Labs, Inc.