Using Color Thief Library in React doesn't work

Question

I am struggling to add Color Thief in a react app. I have followed the instruction on github but nothing changes. I have applied the suggestions reporte here and then inserted the scripts inside a setTimeout function, but I get always the same error:

Can you please help me to run this library (or similars if you have alternatives) in react?

Here is my code so far:

import React from 'react';
import './App.css';
var ColorThief = require('color-thief');

function App() {
 setTimeout(function(){
    var colorThief = new ColorThief();
    var img = 'img.jpg';
    var palette = colorThief.getPalette(img, 8);
    var dominant =  colorThief.getColor(img);
    console.log(palette);
    console.log(dominant);
    document.getElementById("app").style.backgroundColor = "rgb(" + dominant + ")";
 }, 3000);

return (
    <div id="app"></div>
 );
}

export default App;

`getPalette`/`getColor` doesn't expect a string as parameter. — Caramiriel, May 17 '19 at 07:36
For `getColor` there's a `getColorFromUrl`, but since you also need `getPalette`, I suggest having a look at the source code at https://github.com/lokesh/color-thief/blob/fedd83af85f4844c4732d967057323caf0cd0f6e/src/color-thief.js#L141 Create an image element, and after it's loaded, pass it down to the functions you've already used. — Caramiriel, May 17 '19 at 08:02
Unfortunatelly, that doesn't work neither. For the sake of detail I console.log the colorThief var and it turn out to be an empty object. That means that var ColorThief = require('color-thief'); doesn't return anything. Any suggestions? — Nad G, May 17 '19 at 08:13
@Yorbjörn the solutions down below are quite good. Another one could be a rewriting of this lib into es6, unfortunatelly — Nad G, Jul 15 '20 at 08:13
Thanks for response, fortunately I found another package that does the trick for me.. https://www.npmjs.com/package/rgbaster — Yorbjörn, Jul 15 '20 at 09:40

unlimitedbreadsticks20 · Accepted Answer · 2019-09-05T19:34:29.927

Install the library with npm:

$ npm i --save colorthief

Import the library in your file as:

import ColorThief from "colorthief";

Create a react reference to your image like so:

  constructor(props) {
    super(props);

    // Image element reference
    this.imgRef = React.createRef();
  }

The image component should look like this:

          <img
            crossOrigin={"anonymous"}
            ref={this.imgRef}
            src={
              "https://images.unsplash.com/photo-1516876437184-593fda40c7ce"
            }
            alt={"example"}
            className={"example__img"}
            onLoad={() => {
              const colorThief = new ColorThief();
              const img = this.imgRef.current;
              const result = colorThief.getColor(img, 25);
            }}
          />

( Please note, the image props should be in this exact order)

Attempting to install the `colorthief` package hangs during installation. when using `--verbose` during install it seems that it gets stuck when it attempts to load the 'get-pixels' dependency. Any ideas? — DevMike, Jul 13 '22 at 16:16

score 1 · Answer 2 · answered Mar 31 '20 at 11:03

import ColorThief from "colorthief";
import _ from 'lodash';

export const getPalette = (url) => {
    return new Promise((resolve, reject) => {
        if (!url) {
            reject();
        }
        const image = new Image();
        image.src = url;
        image.crossOrigin = 'Anonymous';

        image.onload = function () {
            const colorThief = new ColorThief();
            const palette = colorThief.getPalette(this, 10);
            const result = _.uniq(palette, item => JSON.stringify(item));
            resolve(result);
        }
    });
}

Please describe your solution a little by editing your post. It could be helpful for OP — Marek Szkudelski, Mar 31 '20 at 11:26

score 0 · Answer 3 · answered Jan 28 '22 at 07:28

This below code works for me. version : "colorthief": "^2.3.2",

import ColorThief from "../../../node_modules/colorthief/dist/color-thief.mjs"; // your node modules path

export const getPalette = (url) => {
 return new Promise(resolve=>{
        const img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = () => {
            let colorThief = new ColorThief();
            resolve(colorThief.getPalette(img));
        }
        img.src = url;
    })
}

Using Color Thief Library in React doesn't work

3 Answers3