npm install react-image-colors
Usage
Hook: useImageColors
The useImageColors hook is used to extract the dominant colors from an image and create a gradient background based on those colors.

Parameters
image (string | undefined): The URL of the image from which to extract colors.
options (object): Optional configuration.
crossOrigin (string): The cross-origin setting for the image. Default is "anonymous".
Returns
bgColor (string): The generated gradient background based on the dominant color.
imgRef (React.RefObject<HTMLImageElement>): A reference to the image element.
canvasRef (React.RefObject<HTMLCanvasElement>): A reference to the canvas element.
Example
jsx
Copy code
import React from 'react';
import useImageColors from 'react-image-colors';

const MyComponent = () => {
  const image = 'https://example.com/image.jpg';
  const { bgColor, imgRef, canvasRef } = useImageColors(image);

  return (
    <div style={{ background: bgColor }}>
      <img ref={imgRef} src={image} alt="Example" />
    </div>
  );
};

export default MyComponent;
Function: calculateDominantColor
This function calculates the most dominant color in an image.

Parameters
ctx (CanvasRenderingContext2D): The 2D rendering context for a <canvas> element.
width (number): The width of the image.
height (number): The height of the image.
Returns
string: The dominant color in rgb(r,g,b) format.
Function: createBubbles
This function creates a gradient background based on the dominant color.

Parameters
baseColor (string): The base color for the gradient.
Returns
string: A CSS gradient string.
Function: isWhitish
This function checks if a color is whitish based on its RGB values.

Parameters
r (number): Red component of the color.
g (number): Green component of the color.
b (number): Blue component of the color.
Returns
boolean: true if the color is whitish, false otherwise.
Function: isBlackish
This function checks if a color is blackish based on its RGB values.

Parameters
r (number): Red component of the color.
g (number): Green component of the color.
b (number): Blue component of the color.
Returns
boolean: true if the color is blackish, false otherwise.
Example
Here is an example of using the useImageColors hook in a React component:

jsx
Copy code
import React from 'react';
import useImageColors from 'react-image-colors';

const ImageColorComponent = () => {
  const image = 'https://example.com/image.jpg';
  const { bgColor, imgRef } = useImageColors(image);

  return (
    <div style={{ background: bgColor, padding: '20px', borderRadius: '8px' }}>
      <img ref={imgRef} src={image} alt="Example" style={{ width: '100%' }} />
    </div>
  );
};

export default ImageColorComponent;
Utilities
Function: hexToRgb
Converts a hex color code to RGB.

Parameters
hex (string): The hex color code.
Returns
[number, number, number]: The RGB representation of the color.
Example
javascript
Copy code
import { hexToRgb } from 'react-image-colors';

const rgbColor = hexToRgb('#ff5733');
console.log(rgbColor); // Output: [255, 87, 51]
Function: rgbToHsl
Converts RGB color values to HSL.

Parameters
r (number): Red component of the color.
g (number): Green component of the color.
b (number): Blue component of the color.
Returns
[number, number, number]: The HSL representation of the color.
Example
javascript
Copy code
import { rgbToHsl } from 'react-image-colors';

const hslColor = rgbToHsl(255, 87, 51);
console.log(hslColor); // Output: [0.033, 1, 0.6]
Function: hslToRgb
Converts HSL color values to RGB.

Parameters
h (number): Hue component of the color.
s (number): Saturation component of the color.
l (number): Lightness component of the color.
Returns
[number, number, number]: The RGB representation of the color.
Example
javascript
Copy code
import { hslToRgb } from 'react-image-colors';

const rgbColor = hslToRgb(0.033, 1, 0.6);
console.log(rgbColor); // Output: [255, 87, 51]
License
This project is licensed under the MIT License.