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.
- Importing Canvas, Code, and Framer Components
- Importing External Modules
- NPM Examples: Design System Components
- Importing Any Layer From the Canvas
- Legacy Imports
4 comments on “Importing Other Layers, Components, and Packages”
Leave a Reply
You must be logged in to post a comment.
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
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 withReact.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()
.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
I tried, and the
<Swiper>
and<SwiperSlide>
components gave errors, but looking at MDobs example on the Discord (I suppose you asked there as well), it seems to work anyway.