nkbt/react-collapse

as-prop for Collapse

NicolaiF opened this issue · 1 comments

I want to use this package for creating an expandable table-row, but as the Collapse-component renders two divs, I get a warning about invalidate DOM-nesting, as div's can't be a child of a tr-element.

Would expanding this package with the possibility of changing which element composes the component be possible, with regards to the features it provides?

Something like this:
<Collapse as="tr"> ... </Collapse>

nkbt commented

I thought about doing it few years back and could not make it possible, especially for all cases

  1. As collapse adds two nested divs, you would need two kinds of elements to override

  2. Doing tr>td prevents from calculating height in some cases. Also letting arbitrary dom elements instead of div will break height recalculations in many cases I would not be able to predict

I suggest using regular tr/td outside and put Collapse inside your desired td element. Or replace table with css grid or flexbox