@equinor/eds-utils/dist/esm/hooks/useAutoResize.mjs

Utility functions and hooks for the Equinor Design System

import { useState, useCallback, useEffect } from 'react';

const useAutoResize = maxHeight => {
  const [element, setElement] = useState(null);
  const refCallback = useCallback(node => {
    setElement(node);
  }, []);
  useEffect(() => {
    if (!element || !maxHeight) return;
    const handleResize = () => {
      element.style.height = 'auto';
      const {
        scrollHeight,
        clientHeight
      } = element;
      let newHeight = clientHeight;
      if (maxHeight > newHeight) {
        newHeight = Math.min(maxHeight, Math.max(scrollHeight, newHeight));
        if (scrollHeight > maxHeight) {
          element.style.overflow = 'auto';
        } else {
          element.style.overflow = 'hidden';
        }
        if (newHeight > clientHeight) {
          element.style.height = `${newHeight}px`;
        }
      }
    };
    handleResize();
    element.addEventListener('keyup', handleResize, true);
    return () => {
      element.removeEventListener('keyup', handleResize, true);
    };
  }, [element, maxHeight]);
  return refCallback;
};

export { useAutoResize };