Add children to React Custom Component?

App Building
,
1
  • Goal: Add Children to create Custom Component

I just created a simple React Custom Component, my goal is to have Flex ability.
Currently I'm using the Stack components, but there's a few things to it:

  1. when resizing components that are inside of a Stack, the Editor UI freezes, I'm only able to unfreeze by scrolling down until the Stack component is not visible in the UI, that's really annoying because I take more time than I should to just resize things.
  2. With the Stack component, i'm not being able to set the Width to automatic, because I have 1 list view an 1 Grid inside the Stack, so I need to set a fixed width, which causes the app to not be responsive across different screen sizes.

Because of that I'd like to have a Flex component, to mainly have it's to automatic.
Am I able to achieve that? I could not find any documentation/forum post talking about using children in a custom React component.

That's my app currently:

import React, { FC, ReactNode } from 'react'

import { Retool } from '@tryretool/custom-component-support'

type FlexDivProps = {
  children?: ReactNode
  width?: string | number
}

export const FlexDiv: FC<FlexDivProps> = ({ children, width }) => {
  const [name, _setName] = Retool.useStateString({
    name: 'name',
    description: 'Flex div component'
  })

  const style: React.CSSProperties = {
    display: 'flex',
    flex: 1,
    width: width ?? '100%',
    overflow: 'hidden'
  }

  return (
    <div style={style}>{children ? children : <div>Hello {name}!</div>}</div>
  )
}
  • Screenshots:
    Below an image showing that I cannot set my width to automatic in my Stack:
    image
    image334×984 32.3 KB