Author: John Au-Yeung

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

Categories
React Answers

How to make view 80% width of parent in React Native?

Labrador retriever puppy walking on green grass

Sometimes, we want to make view 80% width of parent in React Native.

In this article, we’ll look at how to make view 80% width of parent in React Native.

How to make view 80% width of parent in React Native?

To make view 80% width of parent in React Native, we can calculate the width with JavaScript.

For instance, we write

import React, { useEffect, useState } from "react";
import { Dimensions, View, Text, StyleSheet } from "react-native";

const Comp = () => {
  const [screenData, setScreenData] = useState(Dimensions.get("window").width);

  useEffect(() => {
    const onChange = () => {
      setScreenData(Dimensions.get("window").width);
    };
    Dimensions.addEventListener("change", onChange);

    return () => {
      Dimensions.removeEventListener("change", onChange);
    };
  });

  return (
    <View style={{ width: screenData * 0.8 }]}>
      <Text>hello</Text>
    </View>
  );
};

export default Comp;

to watch for screen dimensions change by adding the change event listener to the Dimensions object.

We call onChange with the change event is emitted by Dimensions.

In onChange, we call setScreenData set the screenData state to the screen’s width.

And we set the width of the View to screenData * 0.8.

Categories
JavaScript Answers

How to remove HTML tags in JavaScript with regex?

Labrador retriever puppy walking on green grass

Sometimes, we want to remove HTML tags in JavaScript with regex.

In this article, we’ll look at how to remove HTML tags in JavaScript with regex.

How to remove HTML tags in JavaScript with regex?

To remove HTML tags in JavaScript with regex, we use a regex that matches HTML tags with content.

For instance, we write

const regex = /(<([^>]+)>)/gi;
const body = "<p>test</p>";
const result = body.replace(regex, "");

to match all tags in a case insensitive manner with /(<([^>]+)>)/gi.

The g flag finds all matches.

And the i flag matches text in a case insensitive manner.

And then we call body.replace to match all the tags and replace them with empty strings.

Categories
JavaScript Answers

How to delete all rows in an HTML table with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to delete all rows in an HTML table with JavaScript.

In this article, we’ll look at how to delete all rows in an HTML table with JavaScript.

How to delete all rows in an HTML table with JavaScript?

To delete all rows in an HTML table with JavaScript, we can set the table’s `innerHTML property to an empty string.

For instance, we write

const table = document.getElementById("mytable");
table.innerHTML = "";

to select the table with getElementById.

Then we set its innerHTML property to an empty string to remove all the rows.

Conclusion

To delete all rows in an HTML table with JavaScript, we can set the table’s `innerHTML property to an empty string.

Categories
JavaScript Answers

How to force browser to download image files on click with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to force browser to download image files on click with JavaScript.

In this article, we’ll look at how to force browser to download image files on click with JavaScript.

How to force browser to download image files on click with JavaScript?

To force browser to download image files on click with JavaScript, we set the download property of the link.

For instance, we write

const link = document.createElement("a");
link.href = "images.jpg";
link.download = "Download.jpg";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

to create the link with createElement.

Then we set the download property to the file name of the downloaded file.

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

Conclusion

To force browser to download image files on click with JavaScript, we set the download property of the link.

Categories
JavaScript Answers

How to get a list of filenames in folder with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get a list of filenames in folder with JavaScript.

In this article, we’ll look at how to get a list of filenames in folder with JavaScript.

How to get a list of filenames in folder with JavaScript?

To get a list of filenames in folder with JavaScript, we use the Node.js fs.readdirSync method.

For instance, we write

const fs = require("fs");
const files = fs.readdirSync("/assets/photos/");

to call readdirSync with the folder path that we want to get the filenames from.

Conclusion

To get a list of filenames in folder with JavaScript, we use the Node.js fs.readdirSync method.