https://github.com/jonyw4/color-thief-react
🎨 A React component with hooks for Color Thief. Grab color palette from an image with javascript
https://github.com/jonyw4/color-thief-react
color-thief color-thief-hooks color-thief-react javascript palette react react-color-thief react-color-thief-hooks
Last synced: 29 days ago
JSON representation
🎨 A React component with hooks for Color Thief. Grab color palette from an image with javascript
- Host: GitHub
- URL: https://github.com/jonyw4/color-thief-react
- Owner: jonyw4
- License: isc
- Created: 2020-01-29T19:38:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2026-05-28T20:58:19.000Z (about 1 month ago)
- Last Synced: 2026-06-01T19:55:55.950Z (29 days ago)
- Topics: color-thief, color-thief-hooks, color-thief-react, javascript, palette, react, react-color-thief, react-color-thief-hooks
- Language: TypeScript
- Homepage: https://codesandbox.io/s/color-thief-react100-zh6f8
- Size: 1.34 MB
- Stars: 42
- Watchers: 1
- Forks: 8
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://github.com/lokesh/color-thief/).
[](https://www.npmjs.com/package/color-thief-react)
[](https://codecov.io/gh/jonyw4/color-thief-react)
[](https://github.com/semantic-release/semantic-release)
### 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](https://codesandbox.io/s/color-thief-react100-zh6f8)**
## Install
```
npm i -S color-thief-react
```
```
yarn add color-thief-react
```
## Basic Usage
```jsx
import Color from 'color-thief-react';
// In your render...
{({ data, loading, error }) => (
Text with the predominant 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](https://www.npmjs.com/package/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](https://drafts.csswg.org/css-color/#named-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
```jsx
import { useColor } from 'color-thief-react'
const { data, loading, error } = useColor(src, format, { crossOrigin, quality})
Text with the predominant color
```
```jsx
import Color from 'color-thief-react';
// In your render...
{({ data, loading, error }) => (
Text with the predominant 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](#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/
```jsx
import { Palette } from 'color-thief-react';
// In your render...
{({ data, loading, error }) => (
Text with the predominant color
)}
```
```jsx
import { usePalette } from 'color-thief-react'
const { data, loading, error } = usePalette(src, colorCount, format, { crossOrigin, quality})
Text with the predominant color
```