bobs-layout/dist/Parallax/ParallaxContext.js

bob's layout library. supports Container, Flex, Grid

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useContext, useEffect, useState, useRef } from 'react';
var ParallaxContext = createContext({ yOffsetRatio: 0 });
export var useScrollContext = function () { return useContext(ParallaxContext); };
export var ParallaxProvider = function (_a) {
    var css = _a.css, children = _a.children;
    var parallaxRef = useRef(null);
    var _b = useState(0), yOffsetRatio = _b[0], setYOffsetRatio = _b[1];
    useEffect(function () {
        var handleScroll = function () {
            if (parallaxRef.current) {
                var windowY = window.scrollY;
                var elementOffsetTop = parallaxRef.current.offsetTop;
                var centerOffset = windowY - elementOffsetTop;
                var elementHeight = parallaxRef.current.offsetHeight;
                var offsetRatio = centerOffset / elementHeight;
                setYOffsetRatio(offsetRatio);
            }
        };
        var observer = new IntersectionObserver(function (_a) {
            var entry = _a[0];
            if (entry.isIntersecting) {
                window.addEventListener('scroll', handleScroll, { passive: true });
                return;
            }
            window.removeEventListener('scroll', handleScroll);
        });
        if (parallaxRef.current) {
            observer.observe(parallaxRef.current);
        }
        var cloneRef = parallaxRef.current;
        return function () {
            if (cloneRef) {
                observer.disconnect();
            }
        };
    }, []);
    return (_jsx(ParallaxContext.Provider, __assign({ value: { yOffsetRatio: yOffsetRatio } }, { children: _jsx("div", __assign({ ref: parallaxRef, style: css }, { children: children })) })));
};