Best practice for using react-resize-detector v10 in class components

[Maximuschka]

Hi there,

we are maintaining a complex application that uses mainly class components. Most of these components use a complex state and lifecyle. Up to now, we were using react-resize-detector with following pattern:

  <div className='parent'>
    <ResizeDetector handleWidth refreshMode='throttle' refreshRate={500} onResize={(width) => this.onResize(width)} />
    <div className='sibbling' />
    <div className='sibbling' />
  </div>

Since v10, this export does not exist anymore. The only option left is to use useResizeDetector hook, which of course can only be applied in functional components. It is pretty much impossible to rework our application to be fully made up of functional components at this point.

Is there a recommended way/best practice from your side of how to go forward consuming useResizeDetector hook in a class component?

With best regards, Max

[snelsi]

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.

[Maximuschka]

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