Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to add a React video background?

black short coated dog on persons hand

To add a React video background, we can add the loop, autoPlay and muted props to the video element.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <video autoPlay loop muted>
        <source
          src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
          type="video/mp4"
        />
      </video>
    </div>
  );
}

We have autoPlay loop muted added to the video element so that the video plays automatically, repeats when it finishes playing, and it’s muted respectively.

In it, we add the source element with the src attribute set to the URL of the video we want to play in the background.

We add the loop prop to make it restart when the video is finished playing.

The muted prop mutes the video.

As a result, we have a video that loops forever silently on the page.

Categories
JavaScript Answers

How to fix the “cannot read properties of undefined (reading ‘style’)” error with JavaScript?

Labrador retriever puppy walking on green grass

To fix the "cannot read properties of undefined (reading ‘style’)" error with JavaScript, we should make sure the element we’re selecting isn’t null.

For instance, we write

const boxElement = document.querySelector(".box");
if (boxElement) {
  boxElement.style.width = "100px";
  boxElement.style.height = "100px";
  boxElement.style.backgroundColor = "#f00";
}

to select the element with the class box with querySelector.

Then if boxElement isn’t null, then we set its width, height and backgroundColor styles to apply the style values we want.

If the element isn’t null, then the style property should always be an object.

Categories
React Answers

How to link to external URL with React Router?

closeup photo of yellow Labrador retriever puppy

To link to external URL, we can set the to prop to an object with the pathname property set to the external URL we go to when the link is clicked.

For instance, we write

<Link to={{ pathname: "https://example.com" }} target="_blank" />

to set the to prop to { pathname: "https://example.com" } to go to https://example.com when we click on the link.

Also, we set target to _blank so that the link opens a new tab when we click it.

Categories
JavaScript Answers

How to render HTML to an image with JavaScript?

Labrador retriever puppy walking on green grass

To render HTML to an image with JavaScript, we use the html2canvas package.

To install it, we add the script tag with src pointing to https://html2canvas.hertzen.com/dist/html2canvas.min.js

Then we write

const canvas = await html2canvas(document.getElementById("image-wrap"));
const link = document.createElement("a");
document.body.appendChild(link);
link.download = "pic.jpg";
link.href = canvas.toDataURL();
link.target = "_blank";
link.click();

to select the element with getElementById.

And then we call html2canvas with the element.

We get the canvas from the returned promise with await.

Next we create a link with createElement.

We set the download property to the file name.

We call canvas.toDataURL to return the canvas content as a base64 URL string and set it as the value of the href property.

Then we call click to download the content.

Categories
JavaScript Answers

How to use a HTML button to call a JavaScript function?

Labrador retriever puppy walking on green grass

To use a HTML button to call a JavaScript function, we add a click event handler to it.

For instance, we write

<input id="clickMe" type="button" value="clickme" />

to add a button.

Then we write

document.getElementById("clickMe").onclick = () => {
  alert("hello!");
};

to select the button with getElementByid.

And we set its onclick property to a function that shows an alert box that shows hello! when we click the button.