feat: remove useColor hook

jeslage · Aug 13, 2023 · 8bb2ccb · 8bb2ccb
1 parent f4bb1b5
commit 8bb2ccb
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 96 deletions.
diff --git a/README.md b/README.md
@@ -16,16 +16,14 @@ 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
@@ -85,44 +83,35 @@ 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} />;
-};
-```
-
-## 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");
+  return <ColorPicker color="#3573CB" theme={themes.dark} />
+}
 ```
 
 ## 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>{`
-        .saturation-white {
+        .rpc-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));
         }
-        .saturation-black {
+        .rpc-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="saturation-white">
-        <div style={styles.gradient} className="saturation-black" />
+      <div style={styles.gradient} className="rpc-saturation-white">
+        <div style={styles.gradient} className="rpc-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
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,6 @@
-import ColorPicker from "./components/ColorPicker/ColorPicker";
-import themes from "./themes";
-import useColor from "./hooks/useColor";
-import { initColor } from "./components/ColorPicker/helper";
+import ColorPicker from './components/ColorPicker/ColorPicker'
+import themes from './themes'
+import { initColor } from './components/ColorPicker/helper'
 import {
   HslColor,
   HsvColor,
@@ -11,11 +10,10 @@ import {
   Color,
   ColorCombination,
   ColorObject,
-} from "./types";
+} from './types'
 
 export {
   themes,
-  useColor,
   initColor,
   ColorPicker,
   HslColor,
@@ -26,5 +24,5 @@ export {
   Color,
   ColorCombination,
   ColorObject,
-};
-export default ColorPicker;
+}
+export default ColorPicker