useWindowDimensions

useWindowDimensions.js

function useWindowDimensions() {
  
  // set our default for the state to the curent width and height
  const [width, setWidth] = React.useState(window.innerWidth)
  const [height, setHeight] = React.useState(window.innerHeight)
  
  // constantly update our state as the window is resized
  React.useEffect(() => {
    const listenenr = () => {
      setWidth(window.innerWidth)
      setHeight(window.innerHeight)
    }
    
    //when event listenener is invoked we will call listener function above
    window.adEventListener('resize', listener)
    
    //cleanup/remove our event listener when our component is removed from the DOM
    return () => window.removeEventListener('resize', listener)
  })
  
  return { width, height }
}