From f51f6acb4d6d9d8b8dc006ddd5e17c2c06fe1eb3 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Tue, 29 Jun 2021 12:17:16 -0400
Subject: [PATCH] feat(front-end): add hook to access innerWidth whenever the
 viewport is resized

---
 striker-ui/hooks/useWindowDimenions.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 striker-ui/hooks/useWindowDimenions.ts

diff --git a/striker-ui/hooks/useWindowDimenions.ts b/striker-ui/hooks/useWindowDimenions.ts
new file mode 100644
index 00000000..701ab917
--- /dev/null
+++ b/striker-ui/hooks/useWindowDimenions.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+const useWindowDimensions = (): number | undefined => {
+  const [windowDimensions, setWindowDimensions] = useState<number | undefined>(
+    undefined,
+  );
+  useEffect(() => {
+    const handleResize = (): void => {
+      setWindowDimensions(window.innerWidth);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return (): void => window.removeEventListener('resize', handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowDimensions;
+};
+
+export default useWindowDimensions;