Color Thief (React)
🎨 A React component with hooks for Color Thief. Grab color palette from an image with javascript
Use the official Lokesh's color-thief.
Do you like?
Please, consider supporting my work as a lot of effort takes place to create this component! Thanks a lot.
Demo
See a real demo in the Codesandbox
Install
npm i -S color-thief-react
yarn add color-thief-react
Basic Usage
import Color from 'color-thief-react';
<Color src={IMAGE_URL}>
{({ data, loading, error }) => (
<div style={{ color: data }}>
Text with the predominant color
</div>
)}
</Color>
API
Color
Return the predominant color of the image. You can use a React component or hook. Both have the same props.
src
: Required. Link of the image
format
: Format of the response. Can be rgbString
, rgbArray
, hslString
, hslArray
, hex
or a CSS keyword
. Default is rgbString
Color conversion is made possible by the color-convert package.
Examples
rgbString: 'rgb(89, 197, 182)'
rgbArray: [89, 197, 182]
hslString: 'hsl(172, 48%, 56%)'
hslArray: [172, 48, 56]
hex: '#59c5b6'
keyword: 'mediumaquamarine'
CSS Keywords
keyword
: Color keywords are case-insensitive identifiers that represent a specific color, such as red
, blue
, black
, or lightseagreen
.
Keywords are matched to the closest color. See this page on Web Colors for a complete list of colors that can be returned with the keyword
color format.
crossOrigin
: Tag cross-origin for image
quality
: Quality 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. Read more in https://lokeshdhakar.com/projects/color-thief/
Usage
import { useColor } from 'color-thief-react'
const { data, loading, error } = useColor(src, format, { crossOrigin, quality})
<div style={{ color: data }}>
Text with the predominant color
</div>
import Color from 'color-thief-react';
<Color src={IMAGE_URL} format="hex">
{({ data, loading, error }) => (
<div style={{ color: data }}>
Text with the predominant color
</div>
)}
</Color>
Palette
Return a palette of colors based on the predominance of colors on the image. You can use a React component or hook. Both have the same props.
src
: Required. Link of the image
colorCount
: Count of colors of the palette. Default is 2
format
: Format of the response. See the format
section in the Color chapter for a detailed API.
crossOrigin
: Tag cross-origin for image
quality
: Default is 10
. Quality 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. Read more in https://lokeshdhakar.com/projects/color-thief/
import { Palette } from 'color-thief-react';
<Palette src={IMAGE_URL} colorCount={2}>
{({ data, loading, error }) => (
<div style={{ color: data[0], backgroundColor: data[1] }}>
Text with the predominant color
</div>
)}
</Palette>
import { usePalette } from 'color-thief-react'
const { data, loading, error } = usePalette(src, colorCount, format, { crossOrigin, quality})
<div style={{ color: data[0], backgroundPalette: data[1] }}>
Text with the predominant color
</div>