jabb-astro-components/components/template/classes/Hooks.ts

UI Components for web development

import { useState, useEffect } from "react";

function useTransitionSides(
    ref: React.RefObject<HTMLElement | null>,
    rev: boolean
) {
    const [isVisible, setIsVisible] = useState(false);
    const [hasTransitioned, setHasTransitioned] = useState(false);

    useEffect(() => {
        if (!hasTransitioned && ref.current) {
            const observer = new IntersectionObserver(([entry]) => {
                if (entry.isIntersecting) {
                    setIsVisible(true);
                    setHasTransitioned(true);
                    observer.disconnect();
                }
            });
            observer.observe(ref.current);
            return () => observer.disconnect();
        }
    }, [ref, rev, hasTransitioned]);

    const transitionClasses = `relative transition-all duration-700 ${
        isVisible
            ? rev
                ? "left-[0%]"
                : "right-[0%]"
            : rev
              ? "left-[-50%]"
              : "right-[-50%]"
    } opacity-${isVisible ? 100 : 0}`;

    return transitionClasses;
}

function useTransitionUp(ref: React.RefObject<HTMLElement | null>) {
    const [isVisible, setIsVisible] = useState(false);
    const [hasTransitioned, setHasTransitioned] = useState(false);

    useEffect(() => {
        if (!hasTransitioned && ref.current) {
            const observer = new IntersectionObserver(([entry]) => {
                if (entry.isIntersecting) {
                    setIsVisible(true);
                    setHasTransitioned(true);
                    observer.disconnect();
                }
            });
            observer.observe(ref.current);
            return () => observer.disconnect();
        }
    }, [ref, hasTransitioned]);

    const transitionClasses = `relative transition-all duration-700 ${
        isVisible ? "mt-0" : "mt-10"
    } opacity-${isVisible ? 100 : 0}`;

    return transitionClasses;
}

export default {
    useTransitionSides,
    useTransitionUp,
};