react-component-transition/build/esm/transition/animation-hooks/use-container-rectangle.js

Easy animations between react component transitions.

import { useLayoutEffect, useRef } from "react";
import { TransitionState } from "./types";
export var useContainerRectangle = function (props) {
    var prevClientRect = useRef(null);
    var nextClientRect = useRef(null);
    var transitionState = props.transitionState, getElement = props.getElement, onFinish = props.onFinish;
    if (getElement() && transitionState === TransitionState.Exit) {
        prevClientRect.current = getElement().getBoundingClientRect();
    }
    useLayoutEffect(function () {
        if (getElement() && transitionState === TransitionState.ContainerRect) {
            nextClientRect.current = getElement().getBoundingClientRect();
            onFinish();
        }
    }, [transitionState]);
    return {
        prevClientRect: prevClientRect.current,
        nextClientRect: nextClientRect.current,
    };
};