Category: React

To add a required input with React, we add the required prop to the input.

For instance, we write

<input required />

to add an input with the required prop to make it a required input.

To add React file download with JavaScript, we create a link.

And then we can create a hidden link that has the blob’s object URL set as the href attribute and click on the link programmatically to download it.

For instance, we write:

import React from "react";

export default function App() {
  const downloadFile = () => {
    const element = document.createElement("a");
    element.href = url;
    element.download = "filename";
    document.body.appendChild(element);
    element.click();
  };

  return (
    <div>
      <button onClick={downloadFile}>Download txt</button>
    </div>
  );
}

to define the downloadFile function to put the 'hello world' string in a blob and download that as a text file.

In the function, we create an a element with document.createElement.

Next, we set element.href to the fil’s URL.

And we set the file name of the downloaded file by setting the element.download property.

Next, we call document.body.appendChild with the link element to attach it to the body.

Finally, we call element.click to click on the hidden link to download the file.

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.

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.

To render HTML string as real HTML with React, we use the dangerouslySetInnerHTML prop.

For instance, we write

<div dangerouslySetInnerHTML={{ __html: htmlString }} />;

to add a div with the dangerouslySetInnerHTML prop set to an object with the __html property set to the htmlString string.

Then htmlString is rendered as HTML.