search

maslianok / react-resize-detector

A Cross-Browser, Event-based, Element Resize Detection for React
http://maslianok.github.io/react-resize-detector/
MIT License
1.25k stars 91 forks source link

Idea: use one resize observer, observe many elements #154

Closed gorkamolero closed 3 years ago

gorkamolero commented 3 years ago

It's not very performant if you use them a lot. Something like Envato tried, but their library doesn't work: https://github.com/envato/react-resize-observer-hook

maslianok commented 3 years ago

Hi @gorkamolero

Thank you for the suggestion!

We're using ResizeObserver.observe method under the hood. It accepts a single DOM element and I don't want to build a complex (bug-prone) logic on top of this API just for this specific use-case.

Anyway, you can attach resize-observer to any number of elements if you really need to. Just loop through them and wrap them into a HOC:

// ...
return arrayOfComponents.map(component => withResizeDetector(component));
maslianok commented 3 years ago

Let me know if you have any additional questions