feat: useColor hook

README.md

@@ -16,6 +16,7 @@ Potentially "Useful React hooks"!
 - [useMeasurePerformance](https://github.com/shaneiadt/re-hooks/blob/master/src/useMeasurePerformance/index.tsx)
 - [useSlugify](https://github.com/shaneiadt/re-hooks/blob/master/src/useSlugify/index.tsx)
 - [useCase](https://github.com/shaneiadt/re-hooks/blob/master/src/useCase/index.tsx)
+- [useColor](https://github.com/shaneiadt/re-hooks/blob/master/src/useColor/index.tsx)
 
 ## Usage
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/index.tsx

@@ -10,3 +10,4 @@ export * from './useEllipsis';
 export * from './useMeasurePerformance';
 export * from './useSlugify';
 export * from './useCase';
+export * from './useColor';

src/useColor/index.ts

@@ -0,0 +1,40 @@
+export const useColor = () => {
+  const getRandomColor = () => {
+    return (
+      '#' + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, '0')
+    );
+  };
+
+  const fadeColor = (col: string, amt: number) => {
+    const min = Math.min,
+      max = Math.max;
+    const num = parseInt(col.replace(/#/g, ''), 16);
+    const r = min(255, max((num >> 16) + amt, 0));
+    const g = min(255, max((num & 0x0000ff) + amt, 0));
+    const b = min(255, max(((num >> 8) & 0x00ff) + amt, 0));
+
+    return '#' + (g | (b << 8) | (r << 16)).toString(16).padStart(6, '0');
+  };
+
+  const hexToRgb = (
+    hex: string
+  ): { r: number; g: number; b: number } | null => {
+    const match = hex.replace(/#/, '').match(/.{1,2}/g);
+    if (!match) return null;
+    return {
+      r: parseInt(match[0], 16),
+      g: parseInt(match[1], 16),
+      b: parseInt(match[2], 16),
+    };
+  };
+
+  const rgbToHex = (r: number, g: number, b: number) =>
+    '#' +
+    [r, g, b]
+      .map(x => {
+        return x.toString(16).padStart(2, '0');
+      })
+      .join('');
+
+  return { getRandomColor, fadeColor, hexToRgb, rgbToHex };
+};

test/useColor/useColor.test.tsx

@@ -0,0 +1,65 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useColor } from '../../src';
+
+describe(useColor, () => {
+  it('should produce a random hex color', () => {
+    const { result } = renderHook(() => useColor());
+
+    let randomColor = '';
+
+    act(() => {
+      randomColor = result.current.getRandomColor();
+    });
+
+    expect(randomColor).toMatch(/^#?([a-f0-9]{6}|[a-f0-9]{3})$/);
+  });
+
+  it('should produce a faded color', () => {
+    const { result } = renderHook(() => useColor());
+
+    let initialColor = '';
+    let fadedColor = '';
+
+    act(() => {
+      initialColor = result.current.getRandomColor();
+      fadedColor = result.current.fadeColor(initialColor, 1);
+    });
+
+    expect(initialColor).toMatch(/^#?([a-f0-9]{6}|[a-f0-9]{3})$/);
+    expect(fadedColor).toMatch(/^#?([a-f0-9]{6}|[a-f0-9]{3})$/);
+  });
+
+  it('should convert a hex to rgb & rgb to hex', () => {
+    const { result } = renderHook(() => useColor());
+
+    let hex = '';
+    let rgbToHex = '';
+    let hexToRgb: { r: number; g: number; b: number } | null = null;
+    let nullResult: { r: number; g: number; b: number } | null = null;
+
+    act(() => {
+      hex = result.current.getRandomColor();
+      hexToRgb = result.current.hexToRgb(hex);
+      nullResult = result.current.hexToRgb('');
+    });
+
+    expect(nullResult).toBeNull();
+
+    if (hexToRgb) {
+      expect(Object.keys(hexToRgb)).toEqual(
+        expect.arrayContaining(['r', 'g', 'b'])
+      );
+
+      act(() => {
+        const r = hexToRgb?.r || 0;
+        const g = hexToRgb?.g || 0;
+        const b = hexToRgb?.b || 0;
+
+        rgbToHex = result.current.rgbToHex(r, g, b);
+      });
+
+      expect(rgbToHex).toMatch(/^#?([a-f0-9]{6}|[a-f0-9]{3})$/);
+    }
+  });
+});