@kubit-ui-web/react-components/dist/esm/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

import { useEffect, useImperativeHandle, useRef } from 'react';
export const useHeaderShadow = ({ ref, shadow }) => {
    const headerRef = useRef(null);
    useImperativeHandle(ref, () => {
        return headerRef?.current;
    }, []);
    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 };
};
//# sourceMappingURL=useHeaderShadow.js.map