From 7151deb31666adf38fecc9805ed08e1d9912f700 Mon Sep 17 00:00:00 2001
From: cupcakearmy <nicco.borgioli@gmail.com>
Date: Sun, 24 Mar 2019 13:46:19 +0100
Subject: [PATCH] 100vh screen size fix for ios mobile, now dynamic

---
 src/Screens/Home.tsx |  6 +++++-
 src/util.ts          | 17 +++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/Screens/Home.tsx b/src/Screens/Home.tsx
index 4e19159..ce6baa5 100644
--- a/src/Screens/Home.tsx
+++ b/src/Screens/Home.tsx
@@ -4,9 +4,13 @@ import AnimatedBackground from '../Components/AnimatedBackground'
 import Cursor from '../Components/Cursor'
 import Parallax from '../Components/Parallax'
 import Letters from '../Screens/Letters'
+import { useInnerWindowSize } from '../util'
 
 const Home: React.FC = () => {
-	return <div id="home">
+
+	const {height, width} = useInnerWindowSize()
+
+	return <div id="home" style={{width: width + 'px', height: height + 'px'}}>
 		<Parallax>
 			<section id={'letters-container'}>
 				<h1>
diff --git a/src/util.ts b/src/util.ts
index af04793..7cf6623 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,5 +1,22 @@
 import { useEffect, useState } from 'react'
 
+type Size = { width: number, height: number }
+export const useInnerWindowSize = (): Size => {
+	const getCurrentSize = (): Size => ({
+		height: window.innerHeight,
+		width: window.innerWidth,
+	})
+
+	let [size, setSize] = useState<Size>(getCurrentSize)
+
+	useEffect(() => {
+		const handle = () => setSize(getCurrentSize())
+		window.addEventListener('resize', handle)
+		return () => window.removeEventListener('resize', handle)
+	}, [])
+
+	return size
+}
 
 export const useIsMousePresent = () => {
 	let [present, setPresent] = useState<boolean>(false)