Component with child components

Hello, I have tried several several strategies without a solution.

We are trying to implement the following 2 components both having the same issue, they are containers in mobile app.

  1. Carousel > (N) cards
  2. Screen > (N) child

Case #1.
I want to create a component called Carousel with variants like showCounter, border, etc and another component called card, or could called View.
How I can create a component that can accept childs node like other components?

case #2
I want to create a component called screen with variants like fullscreen,fixed, scroll, this screen is the main screen component in the mobile app, new screen will be using the screen component as parent and as childs any other component, how can archive this using components? I want to use components because Screen it’s a component not a group either a Layer

layout example:
<Screen …variants>



Hey James, if I understand correctly it sounds like you’d like to use components to hold a wide variety of nested components (the “Screen” component is a great example).

A method I’ve found success with is using “Placeholder” components that you can swap out with any other component (like child component instances inside a main “Screen” parent component, or child “Card” component instances inside of a “Carousel” parent component). @Adam_Ruthendorf-Przewoski made a really helpful video tutorial where he demonstrates how to apply this method.

I’m also really curious to know what strategies you’ve already attempted that didn’t give you the results you were looking for :eyes:

Hope the “Placeholder component” one does the trick for you!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.