Category: JavaScript

Sometimes, we want to embed SVGs into our React app.

In this article, we’ll look at how to embed SVGs into a React app.

Add Them Directly with JSX

We can embed SVGs directly with JSX into our React app.

For instance, we can write:

import React from "react";

const SvgWithXlink = (props) => {
  return (
    <svg
      width="100%"
      height="100%"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
    >
      <style>{\`.classA { fill:${props.fill} }\`}</style>
      <defs>
        <g id="Port">
          <circle style={{ fill: "inherit" }} r="10" />
        </g>
      </defs>

      <text y="15">black</text>
      <use x="70" y="10" xlinkHref="#Port" />
      <text y="35">{props.fill}</text>
      <use x="70" y="30" xlinkHref="#Port" className="classA" />
      <text y="55">blue</text>
      <use x="70" y="50" xlinkHref="#Port" style={{ fill: "blue" }} />
    </svg>
  );
};

export default function App() {
  return (
    <div className="App">
      <SvgWithXlink fill="green" />
    </div>
  );
}

to embed the SVG in the SvgWithXLink component.

We just put the elements required to embed the SVG into the component.

And we can pass props into the elements as we do with any other HTML elements or components.

We have the circle to add circles.

And the xLinkHref attribute lets us the circle by the id of the g element.

x and y are the coordinates of the location of the elements.

In App , we add SvgWithXLink with the fill prop set to 'green' .

Now we see 3 circles.

Conclusion

We can embed SVGs directly with JSX into our React app.

Sometimes, we want to round up to the next multiple of by with JavaScript.

In this article, we’ll look at how to round up to the next multiple of by with JavaScript.

Use the Math.ceil Method

We can use the Math.ceil method to round up to the next multiple of 5 with JavaScript.

For instance, we can write:

const round5 = (x) => {
  return Math.ceil(x / 5) * 5;
}
console.log(round5(18))

We create the round5 function to return the number x divided by 5.

Then we round that number up to the nearest integer with Math.ceil .

Next, we multiply that by 5 to get x rounded up to the nearest integer.

Therefore, the console log logs 20.

Conclusion

We can use the Math.ceil method to round up to the next multiple of 5 with JavaScript.

Sometimes, we want to hide the cursor on a web page using CSS or JavaScript.

In this article, we’ll look at how to hide the cursor on a web page using CSS or JavaScript.

Hide the Cursor in a Webpage Using CSS

To hide the cursor on a web page with CSS, we can use the cursor property.

For instance, we can write the following HTML:

<div class="nocursor">
   Some stuff
</div>

Then we can hide the cursor when our mouse in the div by writing:

.nocursor {
  cursor: none;
}

Hide the Cursor in a Webpage Using JavaScript

To hide the cursor on a web page with JavaScript, we can use the style.cursor property.

For instance, we can write the following HTML:

<div class="nocursor">
   Some stuff
</div>

Then we can hide the cursor when our mouse in the div by writing:

document.getElementsByClassName('nocursor')[0].style.cursor = 'none';

We get the div with getElementsByClassName .

And we set the style.cursor property of it to 'none' to hide the cursor when our mouse is in the div.

Conclusion

To hide the cursor on a web page with CSS, we can use the cursor property.

To hide the cursor on a web page with JavaScript, we can use the style.cursor property.

Sometimes, we want to get the day of the week and the month of the year with JavaScript.

In this article, we’ll look at how to get the day of the week and the month of the year with JavaScript.

Get the Day of the Week

To get the day of the week, we can use the getDay method with an array of day strings to get the day of the week.

For instance, we can write:

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const dt = new Date(2021, 1, 1)
const day = days[dt.getDay()];
console.log(day)

We have the days array with day names in it.

Then create the dt date object with the Date constructor.

Next, we call getDay on dt to get the day index starting with 0 for Sunday to 6 for Saturday.

And we pass that into days to get the day name of the date.

Therefore day is 'Monday' .

Get the Month of the Year

To get the day of the week, we can use the getMonth method with an array of day strings to get the month of the year.

For instance, we can write:

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const dt = new Date(2021, 1, 1)
const month = months[dt.getMonth()];
console.log(month)

We have the months array with the month names.

We have the days array with day names in it.

Then create the dt date object with the Date constructor.

Next, we call getMonth on dt to get the month index starting with 0 for January to 11 for December.

And we pass that into months to get the day name of the date.

Therefore month is 'February' .

Conclusion

To get the day of the week, we can use the getDay method with an array of day strings to get the day of the week.

And to get the day of the week, we can use the getMonth method with an array of day strings to get the month of the year.

Sometimes, we want to remove a file from a JavaScript FileList object.

In this article, we’ll look at how to remove a file from a JavaScript FileList object.

Use the Spread Operator

One way to remove a file from a JavaScript FileList is to use the spread operator to convert the FileList to an array.

Then we can call splice to remove the file we want.

For instance, we can write the following HTML:

<input type='file' multiple id='files'>

We add multiple to let select multiple files.

Then we can remove one of the items selected by writing:

const input = document.getElementById('files')
input.addEventListener('change', () => {
  const fileListArr = [...input.files]
  fileListArr.splice(1, 1)
  console.log(fileListArr)
})

We get the file input element with getElementById .

We spread input.files into an array.

Then we call splice on the array with index 1 as the first argument and we specify that we remove 1 item with the 2nd arguemnt.

Therefore, fileListArr has the 1st and 3rd file listed.

Use the Array.from Method

We can replace the spread operator with the Array.from method.

For instance, we can write:

<input type='file' multiple id='files'>

And:

const input = document.getElementById('files')
input.addEventListener('change', () => {
  const fileListArr = Array.from(input.files)
  fileListArr.splice(1, 1)
  console.log(fileListArr)
})

to do the same thing.

The only difference is that the spread operator is replaced with Array.from .

Conclusion

One way to remove a file from a JavaScript FileList is to use the spread operator to convert the FileList to an array.

Also, we can replace the spread operator with the Array.from method.