added background color component to show the simplicity of hooks

hooks-example/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "color-convert": "^2.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

hooks-example/src/App.js

@@ -3,6 +3,7 @@ import {useState} from 'react';
 import './App.css';
 import CoolWithClass from "./components/CoolWithClass";
 import CoolWithHooks from "./components/CoolWithHooks";
+import BackgroundColor from "./components/BackgroundColor";
 
 function App() {
 
@@ -15,6 +16,7 @@ function App() {
         </button>
         {showComponents && <CoolWithClass/>}
         {showComponents && <CoolWithHooks/>}
+        <BackgroundColor/>
       </div>
   );
 }

hooks-example/src/components/BackgroundColor.js

@@ -0,0 +1,14 @@
+import React from "react";
+import {useHexBasedOnCoords} from "../hooks/useHexBasedOnCoords";
+import {useMouseMove} from "../hooks/useMouseMove";
+
+const BackgroundColor = () => {
+  const hex = useHexBasedOnCoords(useMouseMove());
+  return (
+      <div style={{'height': '400px', 'backgroundColor': hex}}>
+        <h1>{hex}</h1>
+      </div>
+  )
+};
+
+export default BackgroundColor;

hooks-example/src/components/CoolWithHooks.js

@@ -39,8 +39,7 @@ const CoolWithHooks = props => {
         <h4>Mouse coords - X: {mouseCoords.x}, Y: {mouseCoords.y}</h4>
         <button onClick={() => setCount(count + 1)}>Increment counter</button>
         <p>Class button was clicked {count} {count === 1 ? 'time' : 'times'}</p>
-
-
+
         <button onClick={() => dispatch({ type: 'increment'})}>Inc</button>
         <button onClick={() => dispatch({ type: 'decrement'})}>Dec</button>
         <h3>Reduced state: {state.count}</h3>

hooks-example/src/hooks/useHexBasedOnCoords.js

@@ -1,58 +1,16 @@
 import {useEffect, useState} from "react";
+import colorConvert from 'color-convert';
 
 export function xyToRgb(x, y) {
-  let z = 1.0 - x - y;
-  let Y = 1.0; // Brightness of lamp
-  let X = (Y / y) * x;
-  let Z = (Y / y) * z;
-  let r = X * 1.612 - Y * 0.203 - Z * 0.302;
-  let g = -X * 0.509 + Y * 1.412 + Z * 0.066;
-  let b = X * 0.026 - Y * 0.072 + Z * 0.962;
-  r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
-  g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
-  b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
-  let maxValue = Math.max(r, g, b);
-  r /= maxValue;
-  g /= maxValue;
-  b /= maxValue;
-  r = r * 255;
-
-  if (r < 0) {
-    r = 255
-  }
-
-  g = g * 255;
-  if (g < 0) {
-    g = 255
-  }
-
-  b = b * 255;
-  if (b < 0) {
-    b = 255
-  }
-
-  r = Math.round(r).toString(16);
-  g = Math.round(g).toString(16);
-  b = Math.round(b).toString(16);
-
-  if (r.length < 2)
-    r = "0" + r;
-  if (g.length < 2)
-    g = "0" + g;
-  if (b.length < 2)
-    b = "0" + r;
-
-  let rgb = "#" + r + g + b;
-
-  return rgb;
+  return `#${colorConvert.rgb.hex(x / 2, y / 2, x)}`
 }
 
 export const useHexBasedOnCoords = (props) => {
   const [rgb, setRgb] = useState('#ffffff');
 
   useEffect(() => {
     setRgb(xyToRgb(props.x, props.y));
-  }, [props.x, props.y]);
+  }, [props]);
 
   return rgb;
 };

hooks-example/yarn.lock

@@ -2676,12 +2676,19 @@ color-convert@^1.9.0, color-convert@^1.9.1:
   dependencies:
     color-name "1.1.3"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
 [email protected]:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==