Category: JavaScript

Sometimes, we want to listen to window events from components with React.js.

In this article, we’ll look at how to listen to window events from components with React.js.

How to listen to window events from components with React.js?

To listen to window events from components with React.js, we call window.addEventListener in the useEffect callback.

For instance, we write

useEffect(() => {
  const onScroll = (event) => console.info("scrolling", event);

  window.addEventListener("scroll", onScroll);

  return () => {
    window.removeEventListener("scroll", onScroll);
  };
}, []);

to call the useEffect with a callback that calls window.addEventListener to listen to the scroll event on window.

We set the event listener to onScroll.

We call useEffect with an empty array to call the callback only when the component mounts.

Conclusion

To listen to window events from components with React.js, we call window.addEventListener in the useEffect callback.

Sometimes, we want to fix ‘is not defined react/jsx-no-undef’ error in React.

In this article, we’ll look at how to fix ‘is not defined react/jsx-no-undef’ error in React.

How to fix ‘is not defined react/jsx-no-undef’ error in React?

To fix ‘is not defined react/jsx-no-undef’ error in React, we should make sure our variables are defined.

For instance, we write

import Map from "./Map";

to import the Map variable from the Map module.

The error should go away if the module and the variable exists in the module exists.

Conclusion

To fix ‘is not defined react/jsx-no-undef’ error in React, we should make sure our variables are defined.

Sometimes, we want to convert HTML5 Canvas to PNG File with JavaScript.

In this article, we’ll look at how to convert HTML5 Canvas to PNG File with JavaScript.

How to convert HTML5 Canvas to PNG File with JavaScript?

To convert HTML5 Canvas to PNG File with JavaScript, we call the toDataURL method.

For instance, we write

const dlCanvas = (e) => {
  const dt = canvas.toDataURL("image/png");
  e.target.href = dt.replace(
    /^data:image\/[^;]/,
    "data:application/octet-stream"
  );
};

dl.addEventListener("click", dlCanvas, false);

to define the dlCanvas.

In it, we call canvas.toDataURL to return the canvas contents as a base64 string in the format specified by the argument.

Then we call dt.replace to replace the MIME type part with "data:application/octet-stream".

And we set that as the value of href to start the download.

We call addEventListener to add a click listener for the dl link.

Conclusion

To convert HTML5 Canvas to PNG File with JavaScript, we call the toDataURL method.

Sometimes, we want to convert JSON object to CSV format in JavaScript.

In this article, we’ll look at how to convert JSON object to CSV format in JavaScript.

How to convert JSON object to CSV format in JavaScript>

To convert JSON object to CSV format in JavaScript, we use the some object and array methods.

For instance, we write

const convertToCSV = (arr) => {
  const array = [Object.keys(arr[0])].concat(arr);

  return array
    .map((it) => {
      return Object.values(it).toString();
    })
    .join("\n");
};

console.log(
  convertToCSV([
    {
      id: 1,
      name: "Foo",
      timestamp: new Date(),
    },
    {
      id: 2,
      name: "Bar",
      timestamp: new Date(),
    },
    {
      id: 3,
      name: "Baz",
      timestamp: new Date(),
    },
  ])
);

to define the convertToCSV function.

In it, we get the keys from the first object in the arr array with Object.keys(arr[0]).

Then we put the keys array in an array and call concat with arr.

Next, we call array.map to return the values of the object and return an array of array with the values of each row.

We call toString to return a commas separated string with the values.

And then we call join with '\n' to join the rows together with newline.

Conclusion

To convert JSON object to CSV format in JavaScript, we use the some object and array methods.

Sometimes, we want to change image size with JavaScript

In this article, we’ll look at how to change image size with JavaScript.

How to change image size with JavaScript?

To change image size with JavaScript, we set its width and height properties.

For instance, we write

<img src="https://picsum.photos/200/300" id="yourImgId" />

to add an img element.

Then we write

const image = document.getElementById("yourImgId");
if (image?.style) {
  image.style.height = "100px";
  image.style.width = "200px";
}

to select the img element with getElementById.

Then we set its style.width and style.height properties to set its width and height respectively.

Conclusion

To change image size with JavaScript, we set its width and height properties.