Revert "feat: remove useColor hook"

This reverts commit 159fbe5594512a296d0e039a7e8dd8377e75622b.
jeslage · Aug 13, 2023 · 533d096 · 533d096
1 parent 8bb2ccb
commit 533d096
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -16,14 +16,16 @@ yarn add react-pick-color
 ## Usage
 
 ```js
-import React, { useState } from 'react'
-import ColorPicker from 'react-pick-color'
+import React, { useState } from "react";
+import ColorPicker from "react-pick-color";
 
 const App = () => {
-  const [color, setColor] = useState('#fff')
+  const [color, setColor] = useState("#fff");
 
-  return <ColorPicker color={color} onChange={(color) => setColor(color.hex)} />
-}
+  return (
+    <ColorPicker color={color} onChange={(color) => setColor(color.hex)} />
+  );
+};
 ```
 
 ## Options
@@ -83,35 +85,44 @@ You can add a custom theme for styling the colorpicker component or choose one f
 **Custom Theme**
 
 ```js
-import ColorPicker from 'react-pick-color'
+import ColorPicker from "react-pick-color";
 
 const ThemedColorPicker = () => {
   return (
     <ColorPicker
       color="#3573CB"
       theme={{
-        background: 'lightgrey',
-        inputBackground: 'grey',
-        borderColor: 'darkgrey',
-        borderRadius: '8px',
-        color: 'black',
-        width: '320px',
+        background: "lightgrey",
+        inputBackground: "grey",
+        borderColor: "darkgrey",
+        borderRadius: "8px",
+        color: "black",
+        width: "320px"
       }}
     />
-  )
-}
+  );
+};
 ```
 
 **Predefined Theme**
 
 `react-pick-color` exports a `dark` and a `light` theme.
 
 ```js
-import ColorPicker, { themes } from 'react-pick-color'
+import ColorPicker, { themes } from "react-pick-color";
 
 const ThemedColorPicker = () => {
-  return <ColorPicker color="#3573CB" theme={themes.dark} />
-}
+  return <ColorPicker color="#3573CB" theme={themes.dark} />;
+};
+```
+
+## Hooks
+
+```js
+import { useColor } from "react-pick-color";
+
+// A color as a hex string or rgba/hsla object. Will return a color object.
+const { hex, rgb, hsl, hsv, alpha } = useColor("#fff");
 ```
 
 ## Roadmap

diff --git a/src/components/ColorPicker/helper.ts b/src/components/ColorPicker/helper.ts
@@ -1,20 +1,20 @@
-import tinycolor from 'tinycolor2'
+import tinycolor from "tinycolor2";
 
-import { Color, ColorObject, ColorCombination } from '../../types'
+import { Color, ColorObject, ColorCombination } from "../../types";
 
 export const initColor = (col?: Color): ColorObject => {
-  const color = tinycolor(col)
+  const color = tinycolor(col);
 
-  const isValidColor = color.isValid()
+  const isValidColor = color.isValid();
 
   if (!isValidColor) {
     return {
-      hex: '#000000',
+      hex: "#000000",
       rgb: { r: 0, g: 0, b: 0, a: 1 },
       hsl: { h: 0, s: 0, l: 0, a: 1 },
       hsv: { h: 0, s: 0, v: 0, a: 1 },
       alpha: 1,
-    }
+    };
   }
 
   return {
@@ -23,43 +23,43 @@ export const initColor = (col?: Color): ColorObject => {
     hsl: color.toHsl(),
     hsv: color.toHsv(),
     alpha: color.getAlpha(),
-  }
-}
+  };
+};
 
 export const getColorCombination = (
   color: ColorObject,
   comb: ColorCombination | ColorCombination[]
 ): any[] => {
-  const { hex } = color
+  const { hex } = color;
 
-  const col = tinycolor(hex)
+  const col = tinycolor(hex);
 
-  const all = typeof comb === 'string' ? [comb] : comb
-  const combs: any[] = []
+  const all = typeof comb === "string" ? [comb] : comb;
+  const combs: any[] = [];
 
   all.forEach((item) => {
-    if (item === 'analogous') {
-      return col.analogous().forEach((t) => combs.push(t.toHexString()))
+    if (item === "analogous") {
+      return col.analogous().forEach((t) => combs.push(t.toHexString()));
     }
 
-    if (item === 'monochromatic') {
-      return col.monochromatic().forEach((t) => combs.push(t.toHexString()))
+    if (item === "monochromatic") {
+      return col.monochromatic().forEach((t) => combs.push(t.toHexString()));
     }
 
-    if (item === 'splitcomplement') {
-      return col.splitcomplement().forEach((t) => combs.push(t.toHexString()))
+    if (item === "splitcomplement") {
+      return col.splitcomplement().forEach((t) => combs.push(t.toHexString()));
     }
 
-    if (item === 'tetrad') {
-      return col.tetrad().forEach((t) => combs.push(t.toHexString()))
+    if (item === "tetrad") {
+      return col.tetrad().forEach((t) => combs.push(t.toHexString()));
     }
 
-    if (item === 'triad') {
-      return col.triad().forEach((t) => combs.push(t.toHexString()))
+    if (item === "triad") {
+      return col.triad().forEach((t) => combs.push(t.toHexString()));
     }
 
-    return combs.push(col.complement().toHexString())
-  })
+    return combs.push(col.complement().toHexString());
+  });
 
-  return combs
-}
+  return combs;
+};
diff --git a/src/components/Saturation/Saturation.tsx b/src/components/Saturation/Saturation.tsx
@@ -1,14 +1,14 @@
-import React, { useCallback } from 'react'
+import React, { useCallback } from "react";
 
-import { HslColor, HsvColor } from '../../types'
-import usePosition, { Position } from '../../hooks/usePosition'
+import { HslColor, HsvColor } from "../../types";
+import usePosition, { Position } from "../../hooks/usePosition";
 
-import * as styles from './Saturation.style'
+import * as styles from "./Saturation.style";
 
 export type SaturationProps = {
-  hsl: HslColor
-  onChange?: (color: HsvColor) => void
-}
+  hsl: HslColor;
+  onChange?: (color: HsvColor) => void;
+};
 
 const Saturation = ({ hsl, onChange }: SaturationProps) => {
   const handleMove = useCallback(
@@ -17,14 +17,14 @@ const Saturation = ({ hsl, onChange }: SaturationProps) => {
       onChange({
         ...hsl,
         s: left,
-        v: 1 - top,
+        v: 1 - top
       }),
     [onChange]
-  )
+  );
 
   const { ref, handleStart } = usePosition({
-    onMove: handleMove,
-  })
+    onMove: handleMove
+  });
 
   return (
     <div
@@ -34,23 +34,23 @@ const Saturation = ({ hsl, onChange }: SaturationProps) => {
       onMouseDown={handleStart}
     >
       <style>{`
-        .rpc-saturation-white {
+        .saturation-white {
           background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));
           background: linear-gradient(to right, #fff, rgba(255,255,255,0));
         }
-        .rpc-saturation-black {
+        .saturation-black {
           background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));
           background: linear-gradient(to top, #000, rgba(0,0,0,0));
         }
         `}</style>
-      <div style={styles.gradient} className="rpc-saturation-white">
-        <div style={styles.gradient} className="rpc-saturation-black" />
+      <div style={styles.gradient} className="saturation-white">
+        <div style={styles.gradient} className="saturation-black" />
         <div style={styles.pointer}>
           <div style={styles.circle} />
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default React.memo(Saturation) as typeof Saturation
+export default React.memo(Saturation) as typeof Saturation;
diff --git a/src/hooks/useColor.ts b/src/hooks/useColor.ts
@@ -0,0 +1,16 @@
+import React from "react";
+
+import { Color, ColorObject } from "../types";
+import { initColor } from "../components/ColorPicker/helper";
+
+const useColor = (color: Color) => {
+  const [col, setCol] = React.useState<ColorObject>(initColor(color));
+
+  React.useEffect(() => {
+    setCol(initColor(color));
+  }, [color]);
+
+  return col;
+};
+
+export default useColor;
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,7 @@
-import ColorPicker from './components/ColorPicker/ColorPicker'
-import themes from './themes'
-import { initColor } from './components/ColorPicker/helper'
+import ColorPicker from "./components/ColorPicker/ColorPicker";
+import themes from "./themes";
+import useColor from "./hooks/useColor";
+import { initColor } from "./components/ColorPicker/helper";
 import {
   HslColor,
   HsvColor,
@@ -10,10 +11,11 @@ import {
   Color,
   ColorCombination,
   ColorObject,
-} from './types'
+} from "./types";
 
 export {
   themes,
+  useColor,
   initColor,
   ColorPicker,
   HslColor,
@@ -24,5 +26,5 @@ export {
   Color,
   ColorCombination,
   ColorObject,
-}
-export default ColorPicker
+};
+export default ColorPicker;