Code Components » Importing Other Layers, Components, and Packages

Importing Other Layers, Components, and Packages

You can bring other elements into your code component: components you created, Framer components, components and libraries from public packages, but also: any layer on the canvas.


4 comments on “Importing Other Layers, Components, and Packages”

  • simon lucas says:

    Hey Tes,,

    Adding {children} to my code component works fine, but it shows all the things connected to it in the same container.

    Say I had a custom tab code component, where I have used map to map over the tab titles, how could I do the same for the child items that I have connected to my component (so if I have 3 things connected using component instance, it only shows 1 at a time in my custom tab)
    Thanks,

    Simon

    • Tes Mat says:

      You still get a connector when you just write {props.children} in the JSX? It’s a legacy project, maybe? Because in new projects you can only use component instance property controls.

      Anyway, when using props.children or a property control, you can only change the properties of the layers you’re importing by cloning them with React.cloneElement().

      And for mapping over children there’s a special function: React.Children.map(). Here’s an example.

      And to not show one or more children: simply don’t return anything for that child from inside the map().

  • Andrew Nudelman says:

    Hi Tes – Is it possible (and if so how) to import Swiper JS and use it in a code component? https://swiperjs.com/react#installation

Leave a Reply