React component for expanding and collapsing container with dynamic height.

VerticalCollapse.tsx

import React, {forwardRef, useImperativeHandle, useRef} from 'react';

interface Props {
  children: React.ReactNode;
  className?: string;
  collapsedHeight: number;
  isCollapsed: boolean;
  transitionDuration?: string;
}

export interface VerticleCollapseRef {
  getExpandedHeight: () => number;
}

function VerticalCollapse(
  {children, className, collapsedHeight, isCollapsed, transitionDuration = '0.6s'}: Props,
  ref: React.Ref<VerticleCollapseRef>
) {
  const containerRef = useRef<HTMLDivElement>(null);
  const getExpandedHeight = () => containerRef.current?.scrollHeight ?? collapsedHeight;
  useImperativeHandle(ref, () => ({getExpandedHeight}));

  return (
    <div
      className={className}
      ref={containerRef}
      style={{
        maxHeight: isCollapsed ? collapsedHeight : getExpandedHeight(),
        overflowY: 'hidden',
        transitionProperty: 'max-height',
        transitionDuration
      }}
    >
      {children}
    </div>
  );
}

export default forwardRef(VerticalCollapse);