Categories
React Answers

How to detect browser in React?

To detect browser in React, we use the react-device-detect package.

To install it, we run

npm i react-device-detect

Then we use it by writing

import { isMobile } from "react-device-detect";

function App() {
  if (isMobile) {
    return <div> This content is available only on mobile</div>;
  }
  return <div> ...content </div>;
}

to use the isMobile variable to check if the content is displayed in the mobile browser.

Categories
JavaScript Answers

How to get formatted date time in YYYY-MM-DD HH:mm:ss format using JavaScript?

To get formatted date time in YYYY-MM-DD HH:mm:ss format using JavaScript, we can use some date methods.

For instance, we write

const getFormattedDate = () => {
  const date = new Date();
  const str =
    date.getFullYear() +
    "-" +
    (date.getMonth() + 1) +
    "-" +
    date.getDate() +
    " " +
    date.getHours() +
    ":" +
    date.getMinutes() +
    ":" +
    date.getSeconds();
  return str;
};

to call getFullYear to get the 4 digit year.

We call getMonth to get the month and add 1 to get the human readable month.

We call getDate to get the date.

We call getHours to get the hours.

We call getMinutes to get the minutes.

And we call getSeconds to get the seconds.

Then we concatenate the values together to return the formatted date.

Categories
React Answers

How to mock the window size changing for a React component test with JavaScript?

To mock the window size changing for a React component test with JavaScript, we can mock the window.screen.width property.

For instance, we write

jest.spyOn(window.screen, "width", "get").mockReturnValue(1000);

to call jest.spyOn to mock the window.screen.width getter property.

And we call mockReturnValue to set its return value to 1000.

Categories
JavaScript Answers

How to define regex for empty string or white space with JavaScript?

To define regex for empty string or white space with JavaScript, we can use the \s+ pattern.

For instance, we write

const regex = /^\s+$/;

to define a regex that matches a string with all spaces by using ^ to match the start of the string, \s+ to match spaces, and $ to match the end of the string.

Categories
JavaScript Answers

How to add an InfoWindow to each marker with JavaScript Google Maps API v3?

To add an InfoWindow to each marker with JavaScript Google Maps API v3, we set the info property of the marker.

For instance, we write

const marker = new google.maps.Marker({
  map,
  position: point,
  clickable: true,
});

marker.info = new google.maps.InfoWindow({
  content: `<b>Speed:</b>: ${values.inst} knots`,
});

google.maps.event.addListener(marker, "click", () => {
  marker.info.open(map, marker);
});

to create a marker with the Marker constructor.

Then we set its info property to an InfoWindow instance which has the content set to some text.

And then we add a marker click listener with addListener to open the info window with marker.info.open when we click on the marker.