I would like to create an image that spans the whole screen when first opening my website. I am using react and material ui. Currently my JSX looks like roughly like this. I have used the default material ui theme.
<AppBar>
//code in between
</AppBar>
<Container sx={{margin: '0px', padding: '0px'}}>
<img src={headerPicture} style={{minHeight: '100vh', maxWidth: '100vw'}}/>
</Container>
The issue is, 100vh does not take into account the height of the app bar, therefore the image + the app bar is larger than the screen. I would imagine I would have to do something like this:
<img src={headerPicture} style={{minHeight: '100vh - AppBarHeight', maxWidth: '100vw'}}/>
where the AppBarWidth equals the height of the app bar as it changes responsively.
Do you know how I would go about finding out the height of the app bar?
I have achieved this in one app by setting fixed height on AppBar (can be responsive) and applying that using constants.
export const APP_BAR_HEIGHT = 80;
export const APP_BAR_HEIGHT_LG = 140;
const AppBar = () => {
return (
<div style={{ height: isLargeScreen ? APP_BAR_HEIGHT_LG : APP_BAR_HEIGHT}}>
{/* app bar here */}
</div>
);
}
export default AppBar;
Then you import and use those constants in your project.
Additionally
Write a hook
const useWindowHeight = () => {
const [height, setHeight] = React.useState(window.innerHeight);
React.useEffect(() => {
const handleResize = () => {
setHeight(window.innerHeight);
}
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
}
}, []);
return height;
}
Use this value instead of vh, because the window height changes in some mobile device while scrolling. In the end, this could look like this:
import AppBar, { APP_BAR_HEIGHT, APP_BAR_HEIGHT_LG } from 'whateverpath';
// ...
const windowHeight = useWindowHeight();
return (
<>
<AppBar>
//code in between
</AppBar>
<Container sx={{margin: '0px', padding: '0px'}}>
<img src={headerPicture} style={{minHeight: windowHeight - APP_BAR_HEIGHT, maxWidth: '100vw'}}/>
</Container>
</>
)