How to dynamically vertically align content in a div using transform? - css

Question

I have a simple login screen with a title, input field and button. Once a user clicks the button, the assumption is that the they become authenticated and should move onto the next screen. There is an intermediate transition that I'm trying to implement, which clears the input field and button and translates the title into the center of the div.
Currently, I calculate the container's height and the inner content's height with useRef and then conditionally change the height of Container if the user is authenticated.
Right now, for Title I'm doing,
transform: translateY(${authenticated ? 42 : 0}px);
But 42 could change in the future depending on stuff I might add or different screens that the user is viewing the page on.
Is there a better, more assuring way of doing this?
import * as React from "react";
import styled from "#emotion/styled";
const Container = styled.div`
height: 100vh;
display: grid;
place-items: center;
`;
const Box = styled.div<{
authenticated: boolean;
containerHeight: number;
innerContentHeight: number;
}>`
${({ authenticated, containerHeight, innerContentHeight }) => `
border: 1px solid red;
transition: 0.3s ease-in-out;
width: 15rem;
height: ${
containerHeight
? `${
authenticated
? containerHeight - innerContentHeight
: containerHeight
}px`
: "auto"
}
`}
`;
const Title = styled.h2<{ authenticated: boolean }>`
${({ authenticated }) => `
transform: translateY(${authenticated ? 42 : 0}px);
margin-bottom: 6rem;
`}
`;
const Input = styled.input``;
const Button = styled.button`
width: 100%;
margin-top: 1rem;
`;
export default function App() {
const [containerHeight, setContainerHeight] = React.useState(0);
const [innerContentHeight, setInnerContentHeight] = React.useState(0);
const [authenticated, setAuthenticated] = React.useState(false);
const handleRef = React.useCallback(
(isContainer: boolean) => (ref: HTMLDivElement) => {
if (!ref || (containerHeight && innerContentHeight)) return;
const height = Math.ceil(ref.getBoundingClientRect().height);
console.log("ref", ref);
console.log("height", height);
if (isContainer) {
setContainerHeight(height);
} else {
setInnerContentHeight(height);
}
},
[containerHeight, innerContentHeight]
);
const handleLogin = React.useCallback(() => {
setAuthenticated(true);
}, []);
return (
<Container>
<Box
ref={handleRef(true)}
authenticated={authenticated}
containerHeight={containerHeight}
innerContentHeight={innerContentHeight}
>
<Title authenticated={authenticated}>Welcome</Title>
{!authenticated && (
<div ref={handleRef(false)}>
<Input value={"test#test.com"} />
<Button onClick={handleLogin}>Login</Button>
</div>
)}
</Box>
</Container>
);
}