react-image-colors

react-image-colors

react-image-colors is a React hook library for extracting the average color from an image and creating a gradient background based on the color. 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 random gradient background based on those colors. Ignores whitish colors by default.

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".
  • ignoreWhitishColors (boolean): Ignores whitish pixels in the image. Default is "true".
  • ignoreBlackishColors (boolean): Ignores blackish pixels in the image. Default is "false".
  • generateGradient (boolean): Choose to generate a gradient or return just the dominant color. Default is "true".

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 "./App.css";
import useImageColors from "react-image-colors";
function App() {
  const image =
    "https://i.imgur.com/4CLf7xv_d.webp?maxwidth=520&shape=thumb&fidelity=high";

  const options = {
    ignoreWhitishColors: true, // ignore all image pixels that is whitish
    ignoreBlackishColors: true, // ignore all image pixels that is blakish
    generateGradient: true, // Set this to true if you want to generate gradient
  };

  const { bgColor, imgRef } = useImageColors(image, options);

  console.log(bgColor);

  return (
    <div>
      <h1>image</h1>
      <img ref={imgRef} src={image} alt="Example" />
      <h1>generated color</h1>
      <div style={{ background: bgColor, height: "200px", width: "200px" }} />
    </div>
  );
}

export default App;

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.