React hook for viewport edge detection

detect-edge.hook.js

import { useEffect, useState } from 'react';

export const useViewportEdgeActions = ({ element, parent, reCalculate }) => {
  const [edgeState, setEdgeState] = useState({
    isCloseToRightEdge: false,
    isCloseToLeft: false,
    isCloseToTop: false,
    isCloseToBottom: false,
  });

  useEffect(() => {
    if (element.current) {
      const parentNode = parent ? parent.current : document.body;
      const elementRect = element.current.getBoundingClientRect();
      const parentRect = parentNode.getBoundingClientRect();
      const parentRectHorizontalThreshold = Math.abs(parentRect.right - elementRect.right) - Math.abs(parentRect.left - elementRect.left);
      const parentRectVerticalThreshold = Math.abs(parentRect.top - elementRect.top) - Math.abs(parentRect.bottom - elementRect.bottom);
      const isCloseToRightEdge = parentRectHorizontalThreshold <= 0;
      const isCloseToLeftEdge = parentRectHorizontalThreshold > 0;
      const isCloseToTopEdge = parentRectVerticalThreshold <= 0;
      const isCloseToBottomEdge = parentRectVerticalThreshold > 0;
      setEdgeState({ isCloseToRightEdge, isCloseToLeftEdge, isCloseToTopEdge, isCloseToBottomEdge });
    }
  }, [reCalculate]);
  return edgeState;
};