Category: JavaScript

Sometimes, we want to turn an SVG string into an image in a React component.

In this article, we’ll look at how to turn an SVG string into an image in a React component.

Turn an SVG String into an Image in a React Component

To turn an SVG string into an image in a React component, we can put the SVG string in a base64 URL string.

Then we can use the base64 URL string as the URL of the image.

For instance, we write:

import React from "react";

export default function App() {
  const image =
    '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" ></circle></g></svg>';

  return (
    <div>
      <img src={`data:image/svg+xml;utf8,${image}`} />
    </div>
  );
}

to assign the image variable to a SVG string.

Then we set the src prop to a base64 URL that has the image string in it.

Now we should see the SVG displayed on the screen.

Conclusion

To turn an SVG string into an image in a React component, we can put the SVG string in a base64 URL string.

Then we can use the base64 URL string as the URL of the image.

Sometimes, we want to add a background video with React.

In this article, we’ll look at how to add a background video with React.

Add a Background Video with React

To add a background video with React, we can add the video element with the autoPlay prop.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <video loop autoPlay>
        <source
          src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </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.

Conclusion

To add a background video with React, we can add the video element with the autoPlay prop.

Sometimes, we don’t want to render HTML in our React component with JavaScript.

In this article, we’ll look at which values React components can render other than HTML with JavaScript.

How to add React Components that Doesn’t Render HTML with JavaScript?

It’s possible to render values other than HTML in a component.

We can render one of the following values if we don’t a React component to render anything:

false
null
[]
<React.Fragment></React.Fragment>
<></>

We can render false, null, an empty array or an empty fragment in our component.

However, we can’t render undefined.

Conclusion.

It’s possible to render values other than HTML in a component.

We can render false, null, an empty array or an empty fragment in our component.

However, we can’t render undefined.

Sometimes, we want to get input text field values when enter key is pressed in React.

In this article, we’ll look at how to get input text field values when enter key is pressed in React.

Get Input Text Field Values When Enter Key is Pressed in React

To get input text field values when enter key is pressed in React, we can add an event handler for the keypress event into the input.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <input
      onKeyPress={(ev) => {
        if (ev.key === "Enter") {
          ev.preventDefault();
          console.log(ev.target.value);
        }
      }}
    />
  );
}

to set the onKeyPress prop to a function that checks if the enter key is pressed by comparing 'Enter' against ev.key.

We prevent the default server side form submission behavior from happening with ev.preventDefault.

If it’s true. then we get the value that’s typed into the input box with ev.target.value.

Conclusion

To get input text field values when enter key is pressed in React, we can add an event handler for the keypress event into the input.

Sometimes, we want to handle double click events in a React component.

In this article, we’ll look at how to handle double click events in a React component.

Handle Double Click Events in a React Component

To handle double click events in a React component, we can use the regular click event handler and check how many clicks are done with the detail property.

For instance, we write:

import React from "react";

export default function App() {
  const handleClick = (e) => {
    switch (e.detail) {
      case 1:
        console.log("click");
        break;
      case 2:
        console.log("double click");
        break;
      case 3:
        console.log("triple click");
        break;
      default:
        return;
    }
  };

  return <button onClick={handleClick}>Click me</button>;
}

We have the handleClick function that checks the e.detail property to see how many clicks are done.

If it’s 2, then we know the user double clicked.

When we double click on the button, we should see 'double click' logged in the console.

Conclusion

To handle double click events in a React component, we can use the regular click event handler and check how many clicks are done with the detail property.