@redocly/theme/src/core/hooks/use-full-height.ts

Shared UI components lib

import { useCallback, useEffect, useMemo } from 'react';
import throttle from 'lodash.throttle';

import type { RefObject } from 'react';

export function useFullHeight(element: RefObject<HTMLElement | null>): void {
  const handler = useCallback(() => {
    if (!element.current) {
      return;
    }

    const footer = document.querySelector('footer');
    if (!footer) {
      return;
    }

    const elementTop = element.current.getBoundingClientRect().top;
    const footerOffset = footer.offsetTop - window.scrollY - elementTop;
    if (footerOffset > window.innerHeight) {
      element.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
    } else {
      element.current.style.maxHeight = `${footerOffset}px`;
    }
  }, [element]);

  const throttledHandler = useMemo(() => throttle(handler, 150), [handler]);

  useEffect(() => {
    if (typeof window === 'undefined' || !element.current) {
      return () => {
        // nope
      };
    }

    window.addEventListener('scroll', throttledHandler, {
      capture: false,
    });
    window.addEventListener('resize', throttledHandler, {
      capture: false,
    });

    handler();

    return () => {
      window.removeEventListener('scroll', throttledHandler);
      window.removeEventListener('resize', throttledHandler);
    };
  }, [throttledHandler, element, handler]);
}