Category: React Answers

Sometimes, we want to use NPM UUID package in React.

In this article, we’ll look at how to use NPM UUID package in React.

How to use NPM UUID package in React?

To use NPM UUID package in React, we can install the uuid package, and then we use the v4 function to generate a v4 UUID.

For instance, we write:

import React from "react";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  return (
    <div>
      <h1>{uuidv4()}</h1>
    </div>
  );
}

to import the uuid package with import { v4 as uuidv4 } from "uuid".

And then we call the v4 function which we imported as the uuidv4 function.

We call it to return a new UUID string.

Conclusion

To use NPM UUID package in React, we can install the uuid package, and then we use the v4 function to generate a v4 UUID.

To download a string as .txt file in React, we can convert the string into a blob.

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 downloadTxtFile = () => {
    const element = document.createElement("a");
    const file = new Blob(["hello"], {
      type: "text/plain"
    });
    element.href = URL.createObjectURL(file);
    element.download = "myFile.txt";
    document.body.appendChild(element);
    element.click();
  };

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

to define the downloadTxtFile 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 define a blob with 'hello world' as its content with the Blob constructor.

We set the type property to 'text/plain' to make the downloaded file a text file.

Next, we set element.href to the object URL version of the blob that we create with URL.createObjectURL.

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.

Sometimes, we want to display a image selected from file input in React.

In this article, we’ll look at how to display a image selected from file input in React.

How to display a image selected from file input in React?

To display a image selected from file input in React, we can call the URL.createObjectURL with the selected file object to and set the returned value as the value of the src prop of the img element.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [img, setImg] = useState();

  const onImageChange = (e) => {
    const [file] = e.target.files;
    setImg(URL.createObjectURL(file));
  };

  return (
    <div>
      <input type="file" onChange={onImageChange} />
      <img src={img} alt="" />
    </div>
  );
}

We define the img state which we use as the value of the src prop of the img element.

Next, we define the omImageChange function that takes the file from the e.target.files property via destructuring.

Then we call URL.createObjectURL on the file to return a URL that we can use as the value of img.

And we call setImg with the returned URL string to set that as the value of img.

Now when we select an image file, we should be able to see the selected image below the file input.

Conclusion

To display a image selected from file input in React, we can call the URL.createObjectURL with the selected file object to and set the returned value as the value of the src prop of the img element.

Sometimes, we want to make a sticky footer in React.

In this article, we’ll look at how to make a sticky footer in React.

How to make a sticky footer in React?

To make a sticky footer in React, we can set the position CSS property of the footer element to fixed.

For instance, we write:

import React from "react";

const style = {
  backgroundColor: "#F8F8F8",
  borderTop: "1px solid #E7E7E7",
  textAlign: "center",
  padding: "20px",
  position: "fixed",
  left: "0",
  bottom: "0",
  height: "60px",
  width: "100%"
};

export default function App() {
  return (
    <div>
      <div style={style}>hello</div>
    </div>
  );
}

We set the style prop of the footer div to an object that has the position property set to 'fixed'.

Also, we set the bottom property to '0' to keep the footer div at the bottom.

And we add additional style properties to style the footer div the way we like.

Conclusion

To make a sticky footer in React, we can set the position CSS property of the footer element to fixed.

Sometimes, we want to change zIndex of the items in a react-select drop down.

In this article, we’ll look at how to change zIndex of the items in a react-select drop down.

How to change zIndex of the items in a react-select drop down?

To change zIndex of the items in a react-select drop down, we can set the menuPortalTarget, menuPosition and styles props.

For instance, we write:

import React from "react";
import Select from "react-select";

const options = [
  { label: "Apple", value: "apple" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Pear", value: "pear" },
  { label: "Banana", value: "banana" }
];

export default function App() {
  return (
    <form>
      <Select
        menuPortalTarget={document.body}
        menuPosition="fixed"
        options={options}
        styles={{
          menuPortal: (provided) => ({ ...provided, zIndex: 9999 }),
          menu: (provided) => ({ ...provided, zIndex: 9999 })
        }}
      />
    </form>
  );
}

We set menuPortalTarget to render the menu as the direct child of the body element.

menuPosition is set to 'fixed' to set the position CSS property of the drop down menu to fixed.

And we set the styles property to an object with the menuPortal and menu methods.

In both methods, we return an object with the existing provided styles properties and the zIndex set to 9999 to set the z-index of the drop down menu items to 9999.

Conclusion

To change zIndex of the items in a react-select drop down, we can set the menuPortalTarget, menuPosition and styles props.