Added css-vars-hook and scalable rectangle

.eslintcache

@@ -1 +1 @@
-[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Figure.js":"5"},{"size":500,"mtime":1611856800075,"results":"6","hashOfConfig":"7"},{"size":4854,"mtime":1612115342422,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611856800076,"results":"9","hashOfConfig":"7"},{"size":2114,"mtime":1611951553195,"results":"10","hashOfConfig":"7"},{"size":307,"mtime":1611951739720,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"ff9ndh",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"/Users/user/repos/sort-measurer/src/index.js",[],["23","24"],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],"/Users/user/repos/sort-measurer/src/components/Playground.js",[],"/Users/user/repos/sort-measurer/src/components/Figure.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
+[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Figure.js":"5"},{"size":500,"mtime":1611856800075,"results":"6","hashOfConfig":"7"},{"size":5605,"mtime":1612117286585,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611856800076,"results":"9","hashOfConfig":"7"},{"size":2114,"mtime":1611951553195,"results":"10","hashOfConfig":"7"},{"size":307,"mtime":1611951739720,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"ff9ndh",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"/Users/user/repos/sort-measurer/src/index.js",[],["23","24"],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],"/Users/user/repos/sort-measurer/src/components/Playground.js",[],"/Users/user/repos/sort-measurer/src/components/Figure.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]

package-lock.json

@@ -4786,6 +4786,11 @@
         }
       }
     },
+    "css-vars-hook": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/css-vars-hook/-/css-vars-hook-0.2.5.tgz",
+      "integrity": "sha512-QiCKORnOLeIuy/Xcrtnfsi9b1mFMS7ka8LTh5ab69l71ni4L9/p644eFQm3/wreKBp0znugtfsXkV49EG1K7sg=="
+    },
     "css-vendor": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
     "bootstrap": "^4.5.3",
+    "css-vars-hook": "^0.2.5",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",

src/App.css

@@ -35,3 +35,8 @@ svg {
     transform: rotate(360deg);
   }
 }
+
+.demo-box {
+  width: (--boxWidth);
+  height: (--boxHeight);
+}

src/App.js

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useTheme } from "css-vars-hook";
 
 import "./App.css";
 
@@ -8,10 +9,13 @@ var randomColor = Math.floor(Math.random() * 16777215).toString(16);
 
 var current = "#" + randomColor;
 function App() {
+  const theme = { boxWidth: "200px", boxHeight: "300px" };
   const [sheetWidth, setSheetWidth] = useState("");
   const [sheetHeight, setSheetHeight] = useState("");
-  const [rectangleWidth, setRectangleWidth] = useState("");
-  const [rectangleHeight, setRectangleHeight] = useState("");
+  const [rectangleWidth, setRectangleWidth] = useState(theme.boxWidth);
+  const [rectangleHeight, setRectangleHeight] = useState(theme.boxHeight);
+
+  const { setRef, setVariable } = useTheme(theme);
 
   const handleSheetDimensionsSubmit = (e) => {
     e.preventDefault();
@@ -19,11 +23,31 @@ function App() {
   };
   const handleRectangleDimensionsSubmit = (e) => {
     e.preventDefault();
+    setVariable("boxWidth", rectangleWidth);
+    setVariable("boxHeight", rectangleHeight);
     alert(`Rectangle dimensons: ${rectangleWidth} x ${rectangleHeight}`);
   };
+
+  /* 
+
+// Define theme object where key name is CSS value name without `--` prefix.
+
+
+const Demo = () => {
+
+
+  // Call useTheme hook with theme object as an argument. 
+
+
+  // Define click handler. We are useing setVariable function returned from thw hook here
+  const handleClick = () => {
+    // Change CSS variable `--boxColor` to the value from the user input.
+    
+  };
+  */
   return (
     <>
-      <div className="App">
+      <div className="App" ref={setRef}>
         <header className="App-header">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
             <g fill={current}>
@@ -33,9 +57,7 @@ function App() {
             </g>
           </svg>
         </header>
-
         <h1>Guillotine-cutter App</h1>
-
         <form onSubmit={handleSheetDimensionsSubmit}>
           <label>
             Sheet dimensons:
@@ -52,7 +74,6 @@ function App() {
           </label>
           <input type="submit" value="Submit" />
         </form>
-
         <form onSubmit={handleRectangleDimensionsSubmit}>
           <label>
             Rectangle dimensons:
@@ -69,11 +90,14 @@ function App() {
           </label>
           <input type="submit" value="+" />
         </form>
-
         <div
-          style={{ background: "red", width: "300px", height: "300px" }}
+          className="demo-box"
+          style={{
+            background: "red",
+            width: rectangleWidth,
+            height: rectangleHeight,
+          }}
         ></div>
-
         <Playground title="👨🏻‍💻"></Playground>
       </div>
     </>