@kubit-ui-web/react-components/dist/cjs/components/header/hook/useHeaderShadow.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useHeaderShadow = void 0;
const react_1 = require("react");
const useHeaderShadow = ({ ref, shadow }) => {
    const headerRef = (0, react_1.useRef)(null);
    (0, react_1.useImperativeHandle)(ref, () => {
        return headerRef?.current;
    }, []);
    (0, react_1.useEffect)(() => {
        if (!headerRef.current) {
            return;
        }
        if (!shadow?.showShadowFrom || !shadow.boxShadow) {
            headerRef.current.style.removeProperty('top');
            headerRef.current.style.removeProperty('position');
            return;
        }
        const header = headerRef.current;
        const { showShadowFrom, boxShadow } = shadow;
        header.style.setProperty('top', '0');
        header.style.setProperty('position', 'sticky');
        const handleScroll = () => {
            const scrollPercentage = (window.scrollY / document.body.scrollHeight) * 100;
            if (scrollPercentage >= showShadowFrom) {
                header.style.setProperty('box-shadow', boxShadow);
            }
            else {
                header.style.removeProperty('box-shadow');
            }
        };
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, [shadow]);
    return { headerRef: headerRef };
};
exports.useHeaderShadow = useHeaderShadow;
//# sourceMappingURL=useHeaderShadow.js.map