How to build a custom wrapper box in UESIO that can render any child component?

Q&A
1

Hi @barry ,

I’m trying to build a custom wrapper box component in UESIO that should behave like a simple <div> container — i.e., I should be able to drag and drop any component inside it, and it should render/mount properly.
Here is my current YAML property file for the component:

name: wrapper_box
title: Wrapper Box
description: Plain div-like box that accepts any components inside.
pack: main
entrypoint: components/wrapper_box/wrapper_box
discoverable: true
category: LAYOUT

slots:

  • name: content
    label: Contents
    allowed: [“*”]

properties:

  • type: TEXT
    name: className
    label: CSS classes (Tailwind)

defaultDefinition:
className: “”
content:

sections:

  • type: STYLE
    properties: [className]

    With this setup, I can drag components into the slot (content) in the builder, but they don’t actually render/mount at runtime.

    Could you please guide me on the correct way to implement the React/TSX entrypoint so that the child components dropped into the slot are properly rendered?.

image
image1002×381 103 KB