avent-ui/dist/components/Magneto/src/Magneto.js

The best UI library for Typescript and React

import { jsx } from 'react/jsx-runtime';
import { useRef, useEffect } from 'react';
import { gsap as gsapWithCSS } from '../node_modules/gsap/index.js';

const Magneto = ({ children, className, amplitudex, periodx, amplitudey, periody, ...props }) => {
    const magnetic = useRef(null);
    useEffect(() => {
        const xTo = gsapWithCSS.quickTo(magnetic.current, "x", { duration: 1, ease: `elastic.out(${amplitudex || 1}, ${periodx || 0.3})` });
        const yTo = gsapWithCSS.quickTo(magnetic.current, "y", { duration: 1, ease: `elastic.out(${amplitudey || 1}, ${periody || 0.3})` });
        const mouseEnter = (e) => {
            const { clientX, clientY } = e;
            const { height, width, left, top } = magnetic.current.getBoundingClientRect();
            const x = clientX - (left + width / 2);
            const y = clientY - (top + height / 2);
            xTo(x);
            yTo(y);
        };
        const mouseLeave = () => {
            xTo(0);
            yTo(0);
        };
        const currentMagnetic = magnetic.current;
        if (currentMagnetic) {
            currentMagnetic.addEventListener("mousemove", mouseEnter);
            currentMagnetic.addEventListener("mouseleave", mouseLeave);
        }
        return () => {
            if (currentMagnetic) {
                currentMagnetic.removeEventListener("mousemove", mouseEnter);
                currentMagnetic.removeEventListener("mouseleave", mouseLeave);
            }
        };
    }, [amplitudex, periodx, amplitudey, periody]);
    return (jsx("div", { ref: magnetic, className: `${className}`, ...props, children: children }));
};

export { Magneto as default };
//# sourceMappingURL=Magneto.js.map