@types/react-resizable

type Axis = 'both' | 'x' | 'y' | 'none';

type ResizableBoxProps = ResizableProps & { style?: React.CSSProperties };

type ResizableProps = {
    children?: React.ReactNode;
    className?: string | undefined;
    handle?:
        | React.ReactNode
        | ((
              resizeHandle: ResizeHandle,
              ref: React.RefObject<any>
          ) => React.ReactNode)
        | undefined;
    handleSize?: [number, number] | undefined;
    lockAspectRatio?: boolean | undefined;
    minConstraints?: [width: number, height: number] | undefined;
    maxConstraints?: [width: number, height: number] | undefined;
    onResizeStop?:
        | ((e: React.SyntheticEvent, data: ResizeCallbackData) => any)
        | undefined;
    onResizeStart?:
        | ((e: React.SyntheticEvent, data: ResizeCallbackData) => any)
        | undefined;
    onResize?:
        | ((e: React.SyntheticEvent, data: ResizeCallbackData) => any)
        | undefined;
    draggableOpts?: any;
    resizeHandles?: ResizeHandle[] | undefined;
    transformScale?: number;
} & (
    | {
          width: number;
          height?: number | undefined;
          axis: 'x';
      }
    | {
          width?: number | undefined;
          height: number;
          axis: 'y';
      }
    | {
          width?: number | undefined;
          height?: number | undefined;
          axis: 'none';
      }
    | {
          width: number;
          height: number;
          axis?: 'both';
      }
);

type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';