AutoResizer.tsx

import React from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';

/**
 * Decorator component that automatically adjusts the width and height of a single child
 */
const AutoResizer: React.FunctionComponent<AutoResizerProps> = ({ className, width, height, children, onResize }) => {
  const disableWidth = typeof width === 'number';
  const disableHeight = typeof height === 'number';

  if (disableWidth && disableHeight) {
    return (
      <div className={className} style={{ width, height, position: 'relative' }}>
        {children({ width, height })}
      </div>
    );
  }

  return (
    <AutoSizer className={className} disableWidth={disableWidth} disableHeight={disableHeight} onResize={onResize}>
      {(size) =>
        children({
          width: disableWidth ? width : size.width,
          height: disableHeight ? height : size.height,
        })
      }
    </AutoSizer>
  );
};

interface ChildrenArgs {
  width: number;
  height: number;
}
export interface AutoResizerProps {
  /**
   * Class name for the component
   */
  className?: string;
  /**
   * the width of the component, will be the container's width if not set
   */
  width?: number;
  /**
   * the height of the component, will be the container's width if not set
   */
  height?: number;
  /**
   * A callback function to render the children component
   * The handler is of the shape of `({ width, height }) => node`
   */
  children: (args: ChildrenArgs) => React.ReactNode;
  /**
   * A callback function when the size of the table container changed if the width and height are not set
   * The handler is of the shape of `({ width, height }) => *`
   */
  onResize?: (args: ChildrenArgs) => void;
}

export default AutoResizer;