ReactJS - Get Height of an element

Question

How can I get the Height of an element after React renders that element   HTML   lt div id  container  gt   lt  -- This element s contents will be replaced with your component  -- gt   lt p gt  jnknwqkjnkj lt br gt  jhiwhiw  this is 36px height   lt  p gt   lt  div gt    ReactJS  var DivSize   React createClass      render  function         let elHeight   document getElementById  container   clientHeight     return  lt div className  test  gt Size   lt b gt  elHeight px lt  b gt  but it should be 18px after the render lt  div gt            ReactDOM render     lt DivSize   gt     document getElementById  container        RESULT  Size  36px but it should be 18px after the render   It s calculating the container height before the render  36px   I want to get the height after the render  The right result should be 18px in this case  jsfiddle

User · Answer

For those who are interested in using react hooks  this might help you get started   import React    useState  useEffect  useRef   from  react   export default      gt      const  height  setHeight    useState 0    const ref   useRef null     useEffect      gt        setHeight ref current clientHeight          return        lt div ref  ref  gt         height       lt  div gt

User · Answer

My 2020 s  or 2019  answer  import React   Component  useRef  useLayoutEffect  from  react   import   useDispatch   from  react-redux   import   Toast  ToastBody  ToastHeader   from  reactstrap    import  WidgetHead  from    WidgetHead    export const Widget     title  toggle  reload  children  width  name     gt        let myself   useRef null       const dispatch   useDispatch        useLayoutEffect     gt           if  myself current                const height   myself current clientHeight             dispatch  type  GRID WIDGET HEIGHT   widget name  height                     myself current  myself current myself current clientHeight 0        return            lt Toast innerRef  myself  gt               lt WidgetHead title  title                  toggle  toggle                  reload  reload    gt               lt ToastBody gt               children               lt  ToastBody gt           lt  Toast gt            let use your imagination for what is missing here  WidgetHead   reactstrap is something you can find on npm  replace innerRef with ref for a legacy dom element  say a  lt div gt     useEffect or useLayoutEffect  The last is said to be synchronous for changes  useLayoutEffect  or useEffect  second argument  Second argument is an array  and it is checked before executing the function in the first argument   I used       myself current  myself current myself current clientHeight 0    because myself current is null before rendering  and that is a good thing not to check  the second parameter at the end myself current clientHeight is what I want to check for changes   what I am solving here  or trying to solve   I am solving here the problem of widget on a grid that change its height by their own will  and the grid system should be elastic enough to react   https   github com STRML react-grid-layout

User · Answer

An alternative solution  in case you want to retrieve the size of a React element synchronously without having to visibly render the element  you can use ReactDOMServer and DOMParser   I use this function to get the height of a my list item renderer when using react-window  react-virtualized  instead of having to hardcode the required itemSize prop for a FixedSizeList   utilities js           description Common and reusable functions          requires react-dom server         public     module         import ReactDOMServer from  react-dom server            description Retrieve the width and or heigh of a React element without rendering and committing the element to the DOM          param  object  elementJSX - The target React element written in JSX      return  object       public     function         example        const   width  height     getReactElementSize   lt div style    width   20px   height   40px        props   gt        console log  W    width   H    height        W  20  H  40         const getReactElementSize    elementJSX    gt         const elementString   ReactDOMServer renderToStaticMarkup elementJSX       const elementDocument   new DOMParser   parseFromString elementString   text html        const elementNode   elementDocument getRootNode   body firstChild       const container   document createElement  div        const containerStyle              display   block           position   absolute           boxSizing   border-box           margin   0           padding   0           visibility   hidden              Object assign container style  containerStyle        container appendChild elementNode       document body appendChild container        const width   container clientWidth      const height   container clientHeight       container removeChild elementNode       document body removeChild container        return            width          height                   Export module         export        getReactElementSize

User · Answer

You would also want to use refs on the element instead of using document getElementById  it s just a slightly more robust thing

User · Answer

I found useful npm package https   www npmjs com package element-resize-detector  An optimized cross-browser resize listener for elements   Can use it with React component or functional component Specially useful for react hooks

User · Answer

Here is another one if you need window resize event   class DivSize extends React Component      constructor props        super props       this state           width  0        height  0           this resizeHandler   this resizeHandler bind this          resizeHandler         const width   this divElement clientWidth      const height   this divElement clientHeight      this setState   width  height            componentDidMount         this resizeHandler        window addEventListener  resize   this resizeHandler          componentWillUnmount        window removeEventListener  resize   this resizeHandler          render         return          lt div          className  test          ref    divElement    gt    this divElement   divElement            gt          Size  widht   lt b gt  this state width px lt  b gt   height   lt b gt  this state height px lt  b gt         lt  div gt               ReactDOM render  lt DivSize   gt   document querySelector   container      code pen

User · Answer

See this fiddle  actually updated your s   You need to hook into componentDidMount which is run after render method  There  you get actual height of element   var DivSize   React createClass       getInitialState         return   state  0            componentDidMount         const height   document getElementById  container   clientHeight      this setState   height             render  function         return            lt div className  test  gt          Size   lt b gt  this state height px lt  b gt  but it should be 18px after the render        lt  div gt                  ReactDOM render     lt DivSize   gt     document getElementById  container         lt script src  https   facebook github io react js jsfiddle-integration-babel js  gt  lt  script gt    lt div id  container  gt   lt p gt  jnknwqkjnkj lt br gt  jhiwhiw  this is 36px height   lt  p gt       lt  -- This element s contents will be replaced with your component  -- gt   lt  div gt

User · Answer

Here s a nice reusable hook amended from https   swizec com blog usedimensions-a-react-hook-to-measure-dom-nodes  import   useState  useCallback  useEffect   from  react    function getDimensionObject node      const rect   node getBoundingClientRect       return       width  rect width      height  rect height      top   x  in rect   rect x   rect top      left   y  in rect   rect y   rect left      x   x  in rect   rect x   rect left      y   y  in rect   rect y   rect top      right  rect right      bottom  rect bottom         export function useDimensions data   null  liveMeasure   true      const  dimensions  setDimensions    useState        const  node  setNode    useState null      const ref   useCallback node   gt        setNode node                useEffect      gt        if  node          const measure        gt          window requestAnimationFrame      gt            setDimensions getDimensionObject node                    measure           if  liveMeasure            window addEventListener  resize   measure           window addEventListener  scroll   measure            return      gt              window removeEventListener  resize   measure             window removeEventListener  scroll   measure                                  node  data       return  ref  dimensions  node      To implement  import   useDimensions   from     hooks       Include data if you want updated dimensions based on a change  const MyComponent      data      gt      const       ref        height  width  top  left  x  y  right  bottom         useDimensions data      console log   height  width  top  left  x  y  right  bottom        return        lt div ref  ref  gt         data map d   gt             lt h2 gt  d title  lt  h2 gt                 lt  div gt

User · Answer

Instead of using document getElementById       a better  up to date  solution is to use the React useRef hook that stores a reference to the component element  combined with a useEffect hook  which fires at component renders  import React   useState  useEffect  useRef  from  react    export default App        gt      const  height  setHeight    useState 0     const elementRef   useRef null      useEffect      gt        setHeight elementRef current clientHeight               empty dependency array so it only runs once at render    return        lt div ref  elementRef  gt         height       lt  div gt

User · Answer

Using with hooks     This answer would be helpful if your content dimension changes after loading   onreadystatechange   Occurs when the load state of the data that belongs to an element or a HTML document changes  The onreadystatechange event is fired on a HTML document when the load state of the page s content has changed   import  useState  useEffect  useRef  from  react   const ref   useRef    useEffect      gt        document onreadystatechange        gt          console log ref current clientHeight                      I was trying to work with a youtube video player embedding whose dimensions may change after loading

User · Answer

it might show zero  setTimeout helps to get the correct value and update the state  import React    useState  useEffect  useRef   from  react           export default      gt          const  height  setHeight    useState 0        const ref  useRef null             useEffect      gt           if elemRef current clientHeight            setTimeout      gt               setHeight ref current clientHeight               1000                               return            lt div ref  ref  gt             height           lt  div gt

User · Answer

Following is an up to date ES6 example using a ref   Remember that we have to use a React class component since we need to access the Lifecycle method componentDidMount   because we can only determine the height of an element after it is rendered in the DOM   import React   Component  from  react  import  render  from  react-dom   class DivSize extends Component      constructor props        super props       this state           height  0              componentDidMount         const height   this divElement clientHeight      this setState   height            render         return          lt div          className  test          ref    divElement    gt    this divElement   divElement            gt          Size   lt b gt  this state height px lt  b gt  but it should be 18px after the render        lt  div gt               render  lt DivSize   gt   document querySelector   container      You can find the running example here  https   codepen io bassgang pen povzjKw

[javascript] ReactJS - Get Height of an element

Examples related to javascript

Examples related to reactjs