Resizing rows in dynamic list

I’ve given the dynamic list of this great lib a spin and encountered two issues:

1. My rows can expand/collapse on click (i.e. change height), but the virtualized list doesn’t adapt the item positions. Could this benefit from a ResizeObserver hook such as useMeasure?
2. It would be very nice to have a mechanism where the dynamic list’s overall initial height is set such that it doesn’t cut off partial rows. See e.g. the first example shown in react-collapse where the height limit is set by the number of visible paragraphs.

[piecyk]

Yes, using ResizeObserver is the way to go. Current it’s possible to implement this with small row wrapper, checkout demo at https://codesandbox.io/s/resizeobserver-react-virtual-6131c?file=/src/index.js

IMHO as ResizeObserver is supported in every modern browser https://caniuse.com/resizeobserver maybe we can officially supporting it.

[kidroca]

I’ve found that for any dynamic size to be able to work we shouldn’t set a fixed height on the row elements I also have content that allows to expand an item and it doesn’t work unless I substitute height for min-height

           {rowVirtualizer.virtualItems.map(virtualRow => (
             <div
               key={virtualRow.index}
               ref={virtualRow.measureRef}
               className={virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
               style={{
                 position: 'absolute',
                 top: 0,
                 left: 0,
                 width: '100%',
                 // This change
                 minHeight: `${virtualRow.size}px`,
                 transform: `translateY(${virtualRow.start}px)`,
               }}
             >
               Row {virtualRow.index}
             </div>
           ))}

For example my inner content would expand an item from 100px to 350px, but it won’t work when the row has a fixed height of 100px When I use min-height the row is allowed to expand, which in turn gets captured by measureRef and the change propagates to virtualRow.size and virtualRow.start

I imagine to be able to both expand and shrink we should not be setting any height at all, but only measureRef