Nutella with Pepperoni and Mushrooms
    Wondering what’s next for npm?Check out our public roadmap! »

    color-thief-react
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.12 • Public • Published

    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, hex or rgbArray. Default is rgbString

    crossOrigin: Tag cross-origin for image

    quality: Quality determines how many pixels are skipped before the nex 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. Can be rgbString, hex or rgbArray. Default is rgbString

    crossOrigin: Tag cross-origin for image

    quality: Default is 10. Quality determines how many pixels are skipped before the nex 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>

    Install

    npm i color-thief-react

    DownloadsWeekly Downloads

    1,244

    Version

    2.0.12

    License

    ISC

    Unpacked Size

    34.6 kB

    Total Files

    63

    Last publish

    Collaborators

    • avatar