Code Component
Framer X

Children connectors


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 (

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!

© 2019 jimu Labs, Inc.