The module has been rewritten to be more structured and performant!
BREAKING CHANGES
1. resizableElementId
renamed to querySelector
.
// Before
resizableElementId="elementId"
// After
querySelector="#elementId"
2. Change Callback pattern
function arguments
// Before
<ReactResizeDetector handleWidth>
{(width, height) => <div />}
</ReactResizeDetector>
// After
<ReactResizeDetector handleWidth>
{({ width, height }) => <div />}
</ReactResizeDetector>
IMPROVEMENTS
- We don't use any side-elements for Child Function Pattern, Child Component Pattern and Render prop pattern. Previously you could find some extra div's in a DOM tree and this could break complex layouts.
- Performance optimizations. We use
requestAnimationFrame
to not overload pages withonResize
events. We usePureComponent
to optimize RRD's children rerenders. And plenty other tiny improvements. resizableElementId
is replaced byquerySelector
. Now you can choose any DOM element using querySelector syntax!
Big thanks to @lamhieu-vk for leading and pushing forward this refactoring!