react-image-colors
v0.0.11
Published
`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.
Downloads
27
Readme
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 inrgb(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.