Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

color-thief-react

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

color-thief-react

A React component with hooks for Color Thief. Grab color palette from an image with javascript

  • 2.1.0
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created

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.

npm (scoped) Build Status codecov semantic-release GitHub

Do you like?

Please, consider supporting my work as a lot of effort takes place to create this component! Thanks a lot.

Buy Me A Coffee

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';
// In your render...
<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';
// In your render...
<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';
// In your render...
<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>

FAQs

Package last updated on 13 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts