Observe element for size changes with ResizeObserver

[piecyk]

Was looking on our options how to add observing element for size changes using ResizeObserver fix #376. What if we would change a bit the api, end expose measureElement on top level, not on the item. This would allow use to memo few of them for example in grid and fix #391

Then we nee to bound measureElement with index, we can do it via attribute by adding data-index={virtualRow.index}.

[piecyk]

As note, for example having two lists and keeping only one visible at the time, other hidden by display none. In this context we would like to skip updating sizes for the hidden one as ResizeObserver will be called on display change.

One solution could be, if virtualizer would expose measurementsCache and indexFromElement like in this PR

export const useVirtualizer2 = <TScrollElement extends Element, TItemElement extends HTMLElement>({
  updateSize = true,
  ...options
}: VirtualizerOptions<TScrollElement, TItemElement>) => {
  const virtualizer = useVirtualizer({
    ...options,
    measureElement: (element: TItemElement, instance: Virtualizer<TScrollElement, TItemElement>) => {
      const getSize = () => measureElement(element, instance)

      if (updateSize) {
        return getSize()
      } else {
        const item = instance.measurementsCache[instance.indexFromElement(element)]

        return item ? item.size : getSize()
      }
    },
  })

  return virtualizer
}

[andylwelch]

Thank you, this is amazing! I can delete so much logic to trigger resize manually

[lukesmurray]

@piecyk this change is nice overall, but makes a specific use case a bit more complicated.

Previously we could ignore the API of measureElement and provide our own. For instance measureElement: (height) => {...}. Then instead of assigning the measureElement function to the ref when we render row items, we just call the measureElement function when the height changes.

This is useful if you want to measure height in a custom way, and the element instance alone doesn't provide enough information to compute the height.

I'm curious if you would be open to PRs implementing some sort of custom measure element function. Either extending the current API to allow for user provided options (el, instance, userOptions) or allowing the user to override the definition completely.

[piecyk]

@lukesmurray hi, you can still provide measureElement like in my comment above to return item height, basic change here is that the measureElement will be called if ResizeObserver detects change.

[lukesmurray]

ahh gotcha that makes sense thank you @piecyk.