1

I am trying to use a third-party javascript library in my react app (https://github.com/giventofly/pixelit). Since there was no npm package I downloaded the js file and imported it. It is supposed to take the image by its id and pixel it with the chosen colour palette. However, it is only able to read images on the index.html page and not that have been rendered in the JSX file. Is it because the library does not support react? or am I doing anything wrong?

Following is the working example provided:

<img src="assets/sky.jpg" id="pixelitimg" alt="" />
<canvas id="pixelitcanvas"></canvas>
<script>
  const mypalette = [
    [26, 28, 44],
    // ...
  ];
  const px = new pixelit({
    from: document.getElementById("pixelitimg"),
    palette: mypalette,
  });
  px.draw().pixelate().convertPalette();
</script>

This is how I use it:

import { pixelit } from "./pixelit";

const renderImage = () => {
  const mypalette = [
    [26, 28, 44],
    // ...
  ];
  const px = new pixelit(document.getElementById("pixelitimg"), mypalette);
  px.draw().pixelate().convertPalette();
};

return (
  <div>
    <img src={twitterLogo} id="pixelitimg" alt="" />
    <canvas id="pixelitcanvas"></canvas>
    {renderimage()}
  </div>
);

The react page doesn't show anything. However,when I add the image element and canva element in the index.html page, it works as intended.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
thecalendar
  • 59
  • 7
  • Are you writing this in a text editor, rather than a code editor? If the former, start using a real code editor with syntax highlighting for js/jsx, as you will get clear highlighting hints that should already make you spot the problem. If you run this in the browser with your dev console open, it should be yelling about the fact that you're calling a non-existent function called `renderimage`. Which is true: you called it `renderImage`. Also: use a code formatter plugin like `prettier` so that you can both post and work on properly indented, easy to read code. – Mike 'Pomax' Kamermans Jul 01 '22 at 16:26
  • Thank you for editing it. I only edited the name of the function here to make it more readable. I am using `VS Code` and have installed `prettier`. – thecalendar Jul 01 '22 at 16:33
  • Then you should see the `renderImage` function greyed out, implying it's not getting used anywhere already. But in addition to that: if you want to run JS as part of your render call, either do so as part of `componentDidUpdate` in traditional class context, or using a `useEffect` hook in functional style React. Right now, even if you fixed the naming problem, you're trying to run a function _while_ generating the DOM update, instead of after. – Mike 'Pomax' Kamermans Jul 01 '22 at 16:44
  • The console throws an error of `TypeError: Cannot read properties of null`. That is because it is unable to read the id of the image rendered in the App.js. Is it because I am addressing it wrong? – thecalendar Jul 01 '22 at 16:50
  • No, it's because you need to call your JS _after_ updating the DOM. Turn your code into either a class or functional component, and start using the React [lifecycle calls](https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) or [hooks](https://reactjs.org/docs/hooks-effect.html) to call things at the appropriate time. – Mike 'Pomax' Kamermans Jul 01 '22 at 16:52

0 Answers0