refactor: Pico v2 react class-less login

lucaslarroche · lucaslarroche · commit 483af1d46bf2 · 2024-01-21T19:34:52.000+07:00
diff --git a/v2-react-classless-login/public/index.html b/v2-react-classless-login/public/index.html
@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light dark" />
     <title>React Class-less login • Pico CSS</title>
+    <meta
+      name="description"
+      content="A minimal, class-less login page in React, with a custom primary color."
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/v2-react-classless-login/src/App.js b/v2-react-classless-login/src/App.js
@@ -1,12 +1,22 @@
-import React from "react";
-import useMinHeight from "./useMinHeight";
+import React, { useRef, useEffect } from "react";
 import mainStyles from "./main.scss";
 
 const App = () => {
-  useMinHeight();
+  const mainRef = useRef();
+  useEffect(() => {
+    const setMinHeight = () => {
+      if (!mainRef.current) return;
+      mainRef.current.style.minHeight = `${window.innerHeight}px`;
+    };
+    setMinHeight();
+    window.addEventListener("resize", setMinHeight);
+    return () => {
+      window.removeEventListener("resize", setMinHeight);
+    };
+  }, []);
 
   return (
-    <main>
+    <main ref={mainRef}>
       <h1>Sign in</h1>
       <form>
         <input
diff --git a/v2-react-classless-login/src/useMinHeight.js b/v2-react-classless-login/src/useMinHeight.js
