Fullscreen Support (onClick) (#4)

John Richard Chipps-Harding · web-flow · commit 23909555353c · 2022-10-09T16:28:08.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
   "dependencies": {
     "next": "12.3.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "rooks": "^7.4.0"
   },
   "devDependencies": {
     "@types/node": "18.8.3",
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,3 +1,6 @@
+import { useRef } from "react";
+
+import { useFullscreen } from "rooks";
 import Head from "next/head";
 import type { NextPage } from "next";
 
@@ -6,13 +9,17 @@ import { ImageStack } from "@/components/ImageStack";
 
 const Home: NextPage = () => {
   const images = useImages();
+  const fullscreenContainerRef = useRef<HTMLDivElement>(null);
+  const { toggleFullscreen } = useFullscreen({
+    target: fullscreenContainerRef,
+  });
   return (
-    <>
+    <div ref={fullscreenContainerRef} onClick={toggleFullscreen}>
       <Head>
         <title>Phantom Diffusion</title>
       </Head>
       <ImageStack images={images} />
-    </>
+    </div>
   );
 };
 
