Best practice for using react-resize-detector v10 in class components about react-resize-detector HOT 2 CLOSED

Hi Max,

I understand the challenges of maintaining a codebase with class components, especially when dealing with complex state and lifecycles.

As of version 10, the react-resize-detector no longer exports utils for working with class components, and the recommended approach involves the use of the useResizeDetector hook, which is designed for functional components.

You can create a functional wrapper component for ResizeDetector that encapsulates the hook logic and use it within your existing class components. Here's a basic example 👇

// Functional wrapper component with useResizeDetector hook
import React from 'react';
import { useResizeDetector, useResizeDetectorProps } from 'react-resize-detector';

const ResizeDetector = (props: useResizeDetectorProps<HTMLDivElement>) => {
  const { ref } = useResizeDetector(props);
  return <div ref={ref} style={{ width: '100%' }} />;
};

Additionally, if the migration to v10 proves challenging, you can simply stay on v9 until you find the time and resources to migrate your codebase to functional components. This way, you can continue to benefit from the library's functionality without immediate disruption.

Hope that helps. Feel free to reach out if you have any further questions.

from react-resize-detector.

Hi Roman,

thanks so much for the quick reply and given example. That is actually the same idea I was following yesterday, but was facing issues with the space the wrapper div is occupying. It was leading to positioning issues with the sibbling divs and generally the measurements of the actual target container were wrong.

But following your suggestion, I will continue trying to find a working solution. Worst case would mean I had to use absolute positioning of the wrapper in its parent div to allow for correct measurements of the target container and to avoid floating of its children.

Thanks again,
Max

from react-resize-detector.