Get viewport window height in ReactJS

Question

How do I get the viewport height in ReactJS  In normal JavaScript I use  window innerHeight     but using ReactJS  I m not sure how to get this information  My understanding is that  ReactDOM findDomNode     only works for components created  However this is not the case for the document or body element  which could give me height of the window

User · Answer

just use  useEffect   every change will be logged with current value import React    useEffect   from  react    export function        useEffect      gt        window addEventListener  resize        gt          const myWidth    window innerWidth        console log  my width       myWidth             window      return        lt  gt        enter code here     lt   gt

User · Answer

Answers by  speckledcarp and  Jamesl are both brilliant  In my case  however  I needed a component whose height could extend the full window height  conditional at render time     but calling a HOC within render   re-renders the entire subtree  BAAAD   Plus  I wasn t interested in getting the values as props but simply wanted a parent div that would occupy the entire screen height  or width  or both    So I wrote a Parent component providing a full height  and or width  div  Boom   A use case   class MyPage extends React Component     render         const   data     rest     this props      return data              My app uses templates which misbehave badly if you manually mess around with the container height  so leave the height alone here         lt div gt Yay  render a page with some data   lt  div gt                   lt FullArea vertical gt             You re now in a full height div  so containers will vertically justify properly          lt GridContainer justify  center  alignItems  center  style    height   inherit     gt             lt GridItem xs  12  sm  6  gt              Page loading             lt  GridItem gt           lt  GridContainer gt         lt  FullArea gt          Here s the component   import React    Component   from  react  import PropTypes from  prop-types   class FullArea extends Component     constructor props        super props      this state           width  0        height  0            this getStyles   this getStyles bind this      this updateWindowDimensions   this updateWindowDimensions bind this         componentDidMount         this updateWindowDimensions       window addEventListener  resize   this updateWindowDimensions         componentWillUnmount         window removeEventListener  resize   this updateWindowDimensions         getStyles vertical  horizontal        const styles          if  vertical          styles height      this state height px            if  horizontal          styles width      this state width px            return styles        updateWindowDimensions         this setState   width  window innerWidth  height  window innerHeight           render         const   vertical  horizontal     this props     return          lt div style  this getStyles vertical  horizontal    gt           this props children         lt  div gt               FullArea defaultProps       horizontal  false    vertical  false     FullArea propTypes       horizontal  PropTypes bool    vertical  PropTypes bool     export default FullArea

User · Answer

Adding this for diversity and clean approach  This code uses functional style approach  I have used onresize instead of addEventListener as mentioned in other answers  import   useState  useEffect   from  quot react quot    export default function App       const  size  setSize    useState       x  window innerWidth      y  window innerHeight         const updateSize        gt      setSize         x  window innerWidth        y  window innerHeight           useEffect      gt   window onresize   updateSize          return        lt  gt         lt p gt width is    size x  lt  p gt         lt p gt height is    size y  lt  p gt       lt   gt

User · Answer

You can also try this   constructor props            super props           this state    height  props height  width props width            componentWillMount              console log  WINDOW     window             this setState  height  window innerHeight    px  width window innerWidth  px              render             console log  VIEW     this state

User · Answer

Good day  I know I am late to this party  but let me show you my answer  const  windowSize  setWindowSize    useState null   useEffect      gt        const handleResize        gt            setWindowSize window innerWidth             window addEventListener  resize   handleResize       return      gt  window removeEventListener  resize   handleResize          for future details visit https   usehooks com useWindowSize

User · Answer

I ve just edited QoP s current answer to support SSR and use it with Next js  React 16 8 0      hooks useWindowDimensions js   import   useState  useEffect   from  react    export default function useWindowDimensions        const hasWindow   typeof window      undefined      function getWindowDimensions         const width   hasWindow   window innerWidth   null      const height   hasWindow   window innerHeight   null      return         width        height                const  windowDimensions  setWindowDimensions    useState getWindowDimensions        useEffect      gt        if  hasWindow          function handleResize             setWindowDimensions getWindowDimensions                    window addEventListener  resize   handleResize         return      gt  window removeEventListener  resize   handleResize               hasWindow       return windowDimensions       yourComponent js   import useWindowDimensions from    hooks useWindowDimensions    const Component        gt      const   height  width     useWindowDimensions         you can also use default values or alias to use only one prop          const   height  windowHeight   480   useWindowDimensions       return        lt div gt        width   width    height   height       lt  div gt

User · Answer

with a little typescript  x000D   x000D  import   useState  useEffect   from  react    interface WindowDimentions       width  number      height  number     function getWindowDimensions    WindowDimentions       const   innerWidth  width  innerHeight  height     window       return         width        height                 export default function useWindowDimensions    WindowDimentions       const  windowDimensions  setWindowDimensions    useState lt WindowDimentions gt         getWindowDimensions                 useEffect      gt          function handleResize    void           setWindowDimensions getWindowDimensions                      window addEventListener  resize   handleResize          return     void   gt  window removeEventListener  resize   handleResize                      return windowDimensions      x000D   x000D   x000D

User · Answer

class AppComponent extends React Component      constructor props        super props       this state    height  props height          componentWillMount        this setState  height  window innerHeight    px            render            render your component               Set the props   AppComponent propTypes      height React PropTypes string     AppComponent defaultProps      height  500px          viewport height is now available as  this state height  in rendering template

User · Answer

I just spent some serious time figuring some things out with React and scrolling events   positions - so for those still looking  here s what I found   The viewport height can be found by using window innerHeight or by using document documentElement clientHeight    Current viewport height   The height of the entire document  body  can be found using window document body offsetHeight   If you re attempting to find the height of the document and know when you ve hit the bottom - here s what I came up with   if  window pageYOffset  gt   this myRefII current clientHeight  amp  amp  Math round  document documentElement scrollTop   window innerHeight    lt  document documentElement scrollHeight - 72            this setState               trueOrNot  true                     else           this setState               trueOrNot  false                              My navbar was 72px in fixed position  thus the -72 to get a better scroll-event trigger   Lastly  here are a number of scroll commands to console log    which helped me figure out my math actively   console log  window inner height     window innerHeight    console log  document Element client hieght     document documentElement clientHeight    console log  document Element scroll hieght     document documentElement scrollHeight    console log  document Element offset height     document documentElement offsetHeight    console log  document element scrolltop     document documentElement scrollTop    console log  window page Y Offset     window pageYOffset    console log  window document body offsetheight     window document body offsetHeight     Whew   Hope it helps someone

User · Answer

I found a simple combo of QoP and speckledcarp s answer using React Hooks and resizing features  with slightly less lines of code  const  width  setWidth      useState window innerWidth   const  height  setHeight    useState window innerHeight   const updateDimensions        gt        setWidth window innerWidth       setHeight window innerHeight     useEffect      gt        window addEventListener  quot resize quot   updateDimensions       return      gt  window removeEventListener  quot resize quot   updateDimensions            Oh yeah make sure that the resize event is in double quotes  not single  That one got me for a bit

User · Answer

Using Hooks  React 16 8 0    Create a useWindowDimensions hook   import   useState  useEffect   from  react    function getWindowDimensions       const   innerWidth  width  innerHeight  height     window    return       width      height         export default function useWindowDimensions       const  windowDimensions  setWindowDimensions    useState getWindowDimensions        useEffect      gt        function handleResize           setWindowDimensions getWindowDimensions                window addEventListener  resize   handleResize       return      gt  window removeEventListener  resize   handleResize                return windowDimensions       And after that you ll be able to use it in your components like this  const Component        gt      const   height  width     useWindowDimensions       return        lt div gt        width   width    height   height       lt  div gt           Working example   Original answer  It s the same in React  you can use window innerHeight to get the current viewport s height    As you can see here

User · Answer

speckledcarp  s answer is great  but can be tedious if you need this logic in multiple components  You can refactor it as an HOC  higher order component  to make this logic easier to reuse   withWindowDimensions jsx  import React    Component   from  react    export default function withWindowDimensions WrappedComponent        return class extends Component           state     width  0  height  0             componentDidMount                 this updateWindowDimensions                window addEventListener  resize   this updateWindowDimensions                      componentWillUnmount                 window removeEventListener  resize   this updateWindowDimensions                      updateWindowDimensions        gt                this setState   width  window innerWidth  height  window innerHeight                         render                 return                    lt WrappedComponent                         this props                      windowWidth  this state width                      windowHeight  this state height                      isMobileSized  this state width  lt  700                    gt                                      Then in your main component   import withWindowDimensions from    withWindowDimensions jsx    class MyComponent extends Component     render        if this props isMobileSized  return  lt p gt It s short lt  p gt       else return  lt p gt It s not short lt  p gt      export default withWindowDimensions MyComponent     You can also  stack  HOCs if you have another you need to use  e g  withRouter withWindowDimensions MyComponent    Edit  I would go with a React hook nowadays  example above here   as they solve some of the advanced issues with HOCs and classes

User · Answer

This answer is similar to Jabran Saeed s  except it handles window resizing as well  I got it from here   constructor props      super props     this state     width  0  height  0      this updateWindowDimensions   this updateWindowDimensions bind this      componentDidMount       this updateWindowDimensions      window addEventListener  resize   this updateWindowDimensions      componentWillUnmount       window removeEventListener  resize   this updateWindowDimensions      updateWindowDimensions       this setState   width  window innerWidth  height  window innerHeight

[javascript] Get viewport/window height in ReactJS

Examples related to javascript

Examples related to reactjs

Examples related to window

Examples related to viewport