react-image-colors

react-image-colors

react-image-colors is a React hook library for extracting the dominant colors from an image and creating a gradient background based on those colors. It also includes utilities for distinguishing between white and black colors.

Installation

To install react-image-colors, run:

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): A reference to the image element.
• canvasRef (React.RefObject): A reference to the canvas element.

Example

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:

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

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

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

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.