ShowIf = ({ id, className, style, isTrue, inAnimation, outAnimation, children }) => {
    const [animation, setAnimation] = useState();
    const [isVisible, setIsVisible] = useState(isTrue);
    const [dimensions, setDimensions] = useState();
    const ref = useRef();

    useLayoutEffect(() => {
        if (isTrue) {
            const rect = getElementBoundingClientRect(ref.current);
            setDimensions(rect);
            setIsVisible(true);
            setAnimation(`${inAnimation}In`);
        } else {
            setAnimation(`${outAnimation}Out`);
        }
    }, [isTrue, inAnimation, outAnimation]);

    const handleAnimationEnd = event => {
        if (event.animationName.includes('Out')) {
            setIsVisible(false);
        }
    };

    return (
        <AnimatedContainer
            id={id}
            className={className}
            style={style}
            animation={animation}
            isVisible={isVisible}
            dimensions={dimensions}
            onAnimationEnd={handleAnimationEnd}
            ref={ref}
        >
            {children}
        </AnimatedContainer>
    );
}
A component that shows its contents when a condition is met. Works similar to `RenderIf`,
but `ShowIf` does not remove the elements from the DOM, and animates the content in and out.