determining window width in a React app

Question

determining window width in a React app

I am currently working on a project where I need to conceal certain components when the screen reaches a particular breakpoint. To achieve this, I plan to save the screen width in a state variable and toggle the display property to "none" when it falls below the designated breakpoint.

My main query is related to accessing the screen width or viewport width in React. Additionally, I am wondering if this approach is considered optimal for creating responsive designs?

css reactjs

Answer 1

Answer №1

Here is a straightforward illustration

const utilizeFullWindow = (size) => {
  const [width, setWidth] = useState(0)
  
  useEffect(() => {
    function adjustWindowSize() {
      setWidth(window.innerWidth)
    }
    
    window.addEventListener("resize", adjustWindowSize)
    
    adjustWindowSize()
    
    return () => { 
      window.removeEventListener("resize", adjustWindowSize)
    }
  }, [setWidth])
  
  return useFullWindow > size
}

and how to implement it,

const Salutation = () => {
  const expanded = utilizeFullWindow(600)
  return (<h1>{expanded ? "Greetings Earthlings" : "Hi there"}</h1>)
}

There are various hooks in the following resources that may enhance your understanding.

changeWindowSize,
useWindowSize, https://github.com/jaredLunde/react-hook/tree/master/packages/window-size

Answer 2

Here is a straightforward illustration

const utilizeFullWindow = (size) => {
  const [width, setWidth] = useState(0)
  
  useEffect(() => {
    function adjustWindowSize() {
      setWidth(window.innerWidth)
    }
    
    window.addEventListener("resize", adjustWindowSize)
    
    adjustWindowSize()
    
    return () => { 
      window.removeEventListener("resize", adjustWindowSize)
    }
  }, [setWidth])
  
  return useFullWindow > size
}

and how to implement it,

const Salutation = () => {
  const expanded = utilizeFullWindow(600)
  return (<h1>{expanded ? "Greetings Earthlings" : "Hi there"}</h1>)
}

There are various hooks in the following resources that may enhance your understanding.

changeWindowSize,
useWindowSize, https://github.com/jaredLunde/react-hook/tree/master/packages/window-size

Answer 3

Answer №2

To retrieve the width, use the following method:

const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

Alternatively, CSS can be used to hide specific elements at different breakpoints and create responsive layouts.

Answer 4

To retrieve the width, use the following method:

const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

Alternatively, CSS can be used to hide specific elements at different breakpoints and create responsive layouts.

Answer 5

Answer №3

After realizing a mistake in the previous response, I found a better approach that worked smoothly:

const detectScreenWidth = (size) => {
const [width, setWidth] = useState(0)

useEffect(() => {
  function handleResize() {
    setWidth(window.innerWidth)
  }
  
  window.addEventListener("resize", handleResize)
  
  handleResize()
  
  return () => { 
    window.removeEventListener("resize", handleResize)
  }
}, [setWidth])

return width

}

const screenWidth = detectScreenWidth(400)
<h1>{screenWidth >= 500 ? "Desktop" : "Mobile"}</h1>

Answer 6

After realizing a mistake in the previous response, I found a better approach that worked smoothly:

const detectScreenWidth = (size) => {
const [width, setWidth] = useState(0)

useEffect(() => {
  function handleResize() {
    setWidth(window.innerWidth)
  }
  
  window.addEventListener("resize", handleResize)
  
  handleResize()
  
  return () => { 
    window.removeEventListener("resize", handleResize)
  }
}, [setWidth])

return width

}

const screenWidth = detectScreenWidth(400)
<h1>{screenWidth >= 500 ? "Desktop" : "Mobile"}</h1>

determining window width in a React app

Answer №1

Answer №2

Answer №3

Similar questions

The horizontal scrollbar is not displaying

Mithril does not automatically refresh the view

What is the best way to arrange these containers in a horizontal stack?

Dynamic Hero Banner

What is the method for adjusting the background color of the Material-UI AppBar component?

Bar graph constructed using a pair of div elements

There seems to be an issue with Next.js retrieving an image from an external localhost

Flipping the Script: Unraveling Bootstrap 4's Reverse Pull

In a Typescript Next Js project, the useReducer Hook cannot be utilized

The pinFileToIPFS method in Pinata IPFS is currently unable to accept files uploaded by users

Identify whether the application is built with nextJS, react, or react-native

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

Mastering the art of using transitions in conjunction with display properties

What is the best way to pass the image source as a prop to a child component in React?

Highlighting a row upon being clicked

Enhance Your HTML Table Layout with Dual Column Borders

Styling and structuring your website with CSS and HTML

jQuery plugin stops functioning properly following the use of the jQuery display block method

What is the method for obtaining source code from GitHub?

Error message when using TypeScript with useState hook in React for a string value within an