src/hooks/useRemainingViewPortHeight.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import * as React from 'react';

const { useState, useRef, useCallback, useLayoutEffect } = React;

/**
 * cosnt [ref, remainingHeight] = useRemainingViewPortHeight();
 *
 * return a reference, and the remaining height of the referenced dom node
 * to the bottom of the view port
 *
 */
export default function useRemainingViewPortHeight<
  ElementType extends HTMLDivElement
>(): [React.MutableRefObject<ElementType>, number] {
  const ref = useRef<ElementType>(null);
  const [containerHeight, setContainerHeight] = useState(200);
  const updateContainerHeight = useCallback(() => {
    const { top } = ref.current.getBoundingClientRect();
    setContainerHeight(window.innerHeight - top);
  }, []);

  useLayoutEffect(() => {
    updateContainerHeight();
    window.addEventListener('resize', updateContainerHeight);
    return () => {
      window.removeEventListener('resize', updateContainerHeight);
    };
  }, [updateContainerHeight]);

  return [ref, containerHeight];
}