React hook to know if an element is in the middle of the window.

useOnMiddleOfScreen.ts

import { useState, useEffect } from 'react';

/**
 * Check is an HTML element is in the middle of the window
 * @param ref The HTML element to check
 * @param range The range in which that define the middle zone
 * @returns true if the provided ref is in the middle of the window
 */
export default const useOnMiddleOfScreen = (ref: React.RefObject<HTMLDivElement>, range: number): boolean => {

    const [isOnMiddle, setIsOnMiddle] = useState(false);

    const { innerHeight: windowHeight } = window;

    const refTop = ref.current?.getBoundingClientRect().top ?? 0;
    const refHeight = ref.current?.getBoundingClientRect().height ?? 0;

    useEffect(() => setIsOnMiddle(
            (refTop + (refHeight / 2)) > (windowHeight / 2) - range && (refTop + (refHeight / 2)) < (windowHeight / 2) + range
    ), [refTop]);

    return isOnMiddle;
};