Add children to React Custom Component?

[Thiago_Robles1]

• 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:
  
  

[Darren]

Hi @Thiago_Robles1! Welcome to the community.

If I understand correctly, you're experiencing some challenges with the native Stack component and instead want to render Retool components as children of a custom component. Does that sound right?

Unfortunately, I don't think this is currently possible and, as such, you're likely to find more success by directly tackling the challenges that you've described. You should be able to define the width of the stack with custom CSS, for example.

The other issue you described is a little trickier, as I'm not able to reproduce anything similar. Do you find that it is a consistent issue across browsers and/or computers?

[Thiago_Robles1]

Hey @Darren thanks for the reply. Yes, this resizing issue happens across different browsers/computers (I tested with Brave and Chrome, and Windows/Mac).
Either way, I managed to get it working with the Stack component, even having these issues.
I have other thing that I need to tackle regarding a drag and drop component (the reorderable list does not fit to my needs).

I found this post in the forum: Custom Drag-and-Drop Component for Retool 🎉

Seems like someone was able to achieve the drag-n-drop with a custom component. Is there any approach for me to have something similar to that?

[Darren]

Glad to hear that you were able to get this working.

I see that you reached out to @Almopt expressing interest in the drag-and-drop component that they put together, but you should be able to create something very similar if you're relatively comfortable with React. There are a variety of existing libraries, including dnd-kit.

One thing to keep in mind is that drag-and-drop will only work within the confines of whatever custom component you build! You won't be able to drag between it and the other components in your app.