Category: JavaScript

Categories
React Answers

How to detect Esc key press in React and handle it with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to detect Esc key press in React and handle it with JavaScript.

In this article, we’ll look at how to detect Esc key press in React and handle it with JavaScript.

How to detect Esc key press in React and handle it with JavaScript?

To detect Esc key press in React and handle it with JavaScript, we can create our own hook.

For instance, we write

import React, { useEffect } from "react";

const useEscape = (onEscape) => {
  useEffect(() => {
    const handleEsc = (event) => {
      if (event.keyCode === 27) onEscape();
    };
    window.addEventListener("keydown", handleEsc);

    return () => {
      window.removeEventListener("keydown", handleEsc);
    };
  }, []);
};

export default useEscape;

to create the useEscape hook that listens for the esc key press by listening to the keydown event.

In the handleEsc event handler, we listen for keyCode 27, which is the esc key press.

We remove the event handler with removeListener when we unmount the component that uses the hook.

Then we use it in our component by calling useEscape with a callback that does something when esc is pressed like

const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false));

Conclusion

To detect Esc key press in React and handle it with JavaScript, we can create our own hook.

Categories
JavaScript Answers

How to extend an object in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to extend an object in JavaScript.

In this article, we’ll look at how to extend an object in JavaScript.

How to extend an object in JavaScript?

To extend an object in JavaScript, we can use the Object.create method.

For instance, we write

const person = {
  name: "",
  greet() {
    console.log(`Hi, I am ${this.name}.`);
  },
};

const jack = Object.create(person);
jack.name = "Jack";
jack.greet();

to call Object.create with person to create an object that inherits the prototypes of person and the properties in person.

Then we add the name property to the jack object and call greet on it.

The greet method then should log 'Hi, I am Jack.'.

Conclusion

To extend an object in JavaScript, we can use the Object.create method.

Categories
JavaScript Answers

How to count a JavaScript object’s attributes?

Labrador retriever puppy walking on green grass

Sometimes, we want to count a JavaScript object’s attributes.

In this article, we’ll look at how to count a JavaScript object’s attributes.

How to count a JavaScript object’s attributes?

To count a JavaScript object’s attributes, we can use the Object.keys method.

For instance, we write

Object.keys(myObject).length;

to call Object.keys with myObject to get an array of non-inherited property keys in myObject.

Then we use the length property to get the number of properties in myObject.

Conclusion

To count a JavaScript object’s attributes, we can use the Object.keys method.

Categories
JavaScript Answers

How to catch browser’s zoom event in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to catch browser’s zoom event in JavaScript.

In this article, we’ll look at how to catch browser’s zoom event in JavaScript.

How to catch browser’s zoom event in JavaScript?

To catch browser’s zoom event in JavaScript, we watch the resize event.

For instance, we write

const getSizes = () => {
  const body = document.body;
  body.width = window.innerWidth;
  body.height = window.innerHeight;
  console.log(body.width, body.height);
};

getSizes();

window.addEventListener("resize", getSizes, false);

to call addEventListener to listen for the resize event.

getSizes runs when we zoom in and out since the width and height in pixels will change.

Then we get the width and height of the window with innerWidth and innerHeight.

Conclusion

To catch browser’s zoom event in JavaScript, we watch the resize event.

Categories
JavaScript Answers

How to save an image to localStorage and display it on the next page with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to save an image to localStorage and display it on the next page with JavaScript.

In this article, we’ll look at how to save an image to localStorage and display it on the next page with JavaScript.

How to save an image to localStorage and display it on the next page with JavaScript?

To save an image to localStorage and display it on the next page with JavaScript, we can create a canvas, put the image in it, and then convert the canvas data to a base64 string.

For instance, we write

const getBase64Image = (img) => {
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  const dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
};

const bannerImage = document.getElementById("bannerImg");
const imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

to define the getBase64Image function that creates the canvas element with createElement.

Then we set the width and height of the canvas to the image width and height.

We draw the image on the canvas with drawImage.

And then we call toDataURL to return the base64 string with the canvas data.

Then we use it to encode the image to a string and save it to local storage with

const bannerImage = document.getElementById("bannerImg");
const imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

We get the img element with getElementById and then call getBase64Image to get the data.

And then we call setItem to save the imgData to local storage.

Then on the destination page, we write

const dataImage = localStorage.getItem("imgData");
const bannerImg = document.getElementById("tableBanner");
bannerImg.src = "data:image/png;base64," + dataImage;

to get the local storage entry with getItem.

And we select the image with getElementById.

And then we set the src attribute of the img element with

bannerImg.src = "data:image/png;base64," + dataImage;

Conclusion

To save an image to localStorage and display it on the next page with JavaScript, we can create a canvas, put the image in it, and then convert the canvas data to a base64 string.