Resize an element when it changes size using CSS only

resizer.js

import { Component, ReactNode, Ref, createRef } from 'react';

export class ResizingContainer extends Component {
  childRef = createRef();

  getSnapshotBeforeUpdate() {
    if (!this.childRef.current) {
      return null;
    }

    return {
      height: this.childRef.current.offsetHeight,
      width: this.childRef.current.offsetWidth,
    };
  }

  componentDidUpdate(_, __, prevDimensions) {
    if (!this.childRef.current) {
      return;
    }

    const nextDimensions = {
      height: this.childRef.current.offsetHeight,
      width: this.childRef.current.offsetWidth,
    };

    if (
      nextDimensions.height === prevDimensions.height &&
      nextDimensions.width === prevDimensions.width
    ) {
      return;
    }

    this.childRef.current.style.transitionProperty = 'width,height';
    this.childRef.current.style.transitionDuration = `${500}ms`;
    this.childRef.current.style.boxSizing = 'border-box';
    this.childRef.current.style.transitionTimingFunction = easeInOut;
    this.childRef.current.style.height = `${prevDimensions.height}px`;
    this.childRef.current.style.width = `${prevDimensions.width}px`;

    window.requestAnimationFrame(() => {
      window.requestAnimationFrame(() => {
        if (!this.childRef.current) {
          return;
        }

        this.childRef.current.style.height = `${nextDimensions.height}px`;
        this.childRef.current.style.width = `${nextDimensions.width}px`;

        setTimeout(() => {
          window.requestAnimationFrame(() => {
            if (!this.childRef.current) {
              return;
            }

            this.childRef.current.setAttribute('style', '');
          });
        }, 500);
      });
    });
  }

  render() {
    const { children } = this.props;

    return children({
      ref: this.childRef,
    });
  }
}