Category: React

Sometimes, we want to store screen size info on window resize with React and Redux.

In this article, we’ll look at how to store screen size info on window resize with React and Redux.

How to store screen size info on window resize with React and Redux?

To store screen size info on window resize with React and Redux, we can listen for the window resize event with addEventListener.

Then we store the screen size in the store.

For instance, we write:

import React, { useEffect } from "react";
import { Provider, useDispatch, useSelector } from "react-redux";
import { combineReducers, createStore } from "redux";

const ScreenReducer = (state = {}, action) => {
  switch (action.type) {
    case "SCREEN_RESIZE":
      const { screenWidth } = action;
      return { ...state, screenWidth };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  screen: ScreenReducer
});

const store = createStore(rootReducer);

const ScreenSize = () => {
  const { screenWidth } = useSelector((s) => s.screen);
  const dispatch = useDispatch();

  useEffect(() => {
    const onResize = () => {
      dispatch({ type: "SCREEN_RESIZE", screenWidth: window.innerWidth });
    };

    window.addEventListener("resize", onResize);

    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, [dispatch]);

  return (
    <div>
      <span>{screenWidth}</span>
    </div>
  );
};

export default function App() {
  return (
    <Provider store={store}>
      <ScreenSize />
    </Provider>
  );
}

We have the ScreenReducer reducer function that returns the state + 1 if the 'ADD' action type is dispatched.

We get the screenWidth from the action and we return it in the state.

Then we call combineReducers with an object with the count as the state property name and the ScreenReducer as its reducer.

Next, we call createStore with rootReducer to create the store from the root reducer.

Then we create the ScreenSize component that calls the useSelector hook to return the the value of the count state.

And we call the useDispatch hook to return the dispatch function that we can use to dispatch actions.

We watch for screen size changes by using the useEffect hook with a callback that calls window.addEventListener with the onResize function.

In onResize, we call dispatch with an object that has the type and the screenWidth properties.

window.innerWidth gets the screen’s width.

Also, we return a function that calls window.removeEventListener to remove the resize listener when we unmount the component.

Finally, in App, we wrap Provider around Counter so useSelector and useDispatch can be used in ScreenSize.

And we set the store prop to the store so we can dispatch actions and get states from the store.

Conclusion

To store screen size info on window resize with React and Redux, we can listen for the window resize event with addEventListener.

Then we store the screen size in the store.

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.