Reusable Modal Component

[alexkharatyan]

//FOR BODY OVERFLOW ISSUE

import React, {useEffect} from 'react';

const useModalOverflow = (isOpen = false, needToOverflow = true, style={}) => {
    useEffect(() => {
        if(needToOverflow) {
            const body = document.querySelector('body');
            const hasScrollableContent = body.scrollHeight > window.innerHeight;
            if(isOpen) {
                if (hasScrollableContent) {
                    body.classList.add('scroll-hidden');
                    for (const property in style) {
                        body.style[property] = style[property];
                    }
                }
            } else {
                body.classList.remove('scroll-hidden');
            }
        }
        return () => {
            if(needToOverflow) {
                const body = document.querySelector('body');
                body.classList.remove('scroll-hidden');
            }
        };
    }, [isOpen]);

};

export {useModalOverflow};