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 props.children in the component. For example:

export function SingleChild(props) {
  return (

Multi-children connector

In addition to the above, add this to propertyControls:

import { addPropertyControls } from "framer"
export function MultipleChildren(props) {
addPropertyControls(MultipleChildren, {
  children: {
    type: ControlType.Array,
    title: "Content",
    propertyControl: {
      type: ControlType.ComponentInstance,
      title: "Page"

Note: The prop name here actually doesn’t have to be children, it can be any valid prop name. As long as the control type is Array and its inner property control is ControlType.ComponentInstance, we’ll get a multi-connector.

Multi-connector with titles

In fact, we can label each connected item with a title and access them as respective props:

multi-connector with titles

export function MultipleChildrenWithTitles(props) {
addPropertyControls(MultipleChildrenWithTitles, {
  ceo: {
    type: ControlType.ComponentInstance,
    title: "CEO"
  cto: {
    type: ControlType.ComponentInstance,
    title: "CTO"
  coo: {
    type: ControlType.ComponentInstance,
    title: "COO"

After this, we’ll be able to access the linked React elements via props:

const { ceo, cto, coo } = props;

One thing to note is that the value of these props are arrays. If it’s connected to something, it’ll be an array that contains one React element, otherwise it’ll be an empty array.

So in the example above, ceo[0] will the actual React element that we can clone or put in the JSX.

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!

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!

© 2020 jimu Labs, Inc.