A React Hook wrapper for the package color-thief made by lokesh
MIT License
A React Hook wrapper for the package color-thief made by lokesh
To use this package you must have at least React version 16.8.0 as that is when hooks were first added.
npm i -S use-color-thief
import useColorThief from 'use-color-thief';
import { useEffect } from 'react';
const source = 'https://source.unsplash.com/random/1280x720';
const MyComponent = () => {
const { color, palette } = useColorThief(source, {
format: 'hex',
colorCount: 10,
quality: 10,
});
useEffect(() => {
console.log('Color:', color);
console.log('Palette:', palette);
}, [palette, color]);
return <div>{color}</div>;
};
export default MyComponent;
const { color, palette } = useColorThief(source, {
format: 'rgb',
colorCount: 10,
quality: 10,
});
Type: String
or React Ref
The image to grab the primary color and palette from. The source can be one of 3 options:
https://www.example.com/my-image.png
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAS...
useRef
or createRef
(most likely useRef
) that is attached to an img
element in your jsx
const imgRef = useRef();
const output = useColorThief(imgRef);
return <img ref={imgRef} src="https://www.example.com/my-image.png" />;
Type: object
The optional parameters you can pass to modify the output of the hook.
Type: string
— Default: 'rgb'
The format
option changes the format of the color
and palette
outputs. You pass either rgb
or hex
.
Type: number
— Default: 10
An optional argument that must be an Integer of value 1 or greater, and defaults to 10. The number determines how many pixels are skipped before the next one is sampled. We rarely need to sample every single pixel in the image to get good results. The bigger the number, the faster a value will be returned. This field applies to both returns, color
and palette
.
Type: number
— Default: 10
The number of colors to return for the palette
field.
This hook returns an object containing two fields, color
and palette
.
Type: Array[Integer]
or String
— Default: null
The dominant color from the image. If nothing or rgb
is passed for options.format
, this value will be returned as an array of three integers representing red, green, and blue values. If hex
is passed for options.format
the color will be returned as a string in hex format, #RRGGBB
.
Type: Array[Array[Integer]]
or Array[String]
- Default: null
A palette from the image by clustering similar colors. The palette is returned as an array containing colors, each color matching the same format as the output.color
value returned.
Each demo grabs a random image each time, so reload to see a different example output