How to get the width of a react element

Question

Im trying to create a range input that displays a tooltip right above the slider thumb   I went through some vanilla JS examples online and it seems that I need to have the width of the element to acomplish that   So I was just wondering how to get the elements width   Pretty much the equivalent of the JQuery method   element  width

User · Answer

class MyComponent extends Component         constructor props           super props          this myInput   React createRef                  componentDidMount              console log this myInput current offsetWidth                 render              return              new way - as of React 16 3          lt div ref  this myInput  gt some elem lt  div gt             legacy way             lt div ref   ref    gt  this myInput   ref  gt some elem lt  div gt

User · Answer

With hooks   const MyComponent        gt      const ref   useRef null     useEffect      gt        console log  width   ref current   ref current offsetWidth   0         ref current      return  lt div ref  ref  gt Hello lt  div gt

User · Answer

Here is a TypeScript version of  meseern s answer that avoids unnecessary assignments on re-render  import React    useState  useEffect   from  react    export function useContainerDimensions myRef  React RefObject lt any gt       const  dimensions  setDimensions    useState   width  0  height  0        useEffect      gt        const getDimensions        gt           width   myRef  amp  amp  myRef current offsetWidth     0        height   myRef  amp  amp  myRef current offsetHeight     0               const handleResize        gt          setDimensions getDimensions                 if  myRef current          setDimensions getDimensions                window addEventListener  resize   handleResize        return      gt          window removeEventListener  resize   handleResize                myRef       return dimensions

User · Answer

A simple and up to date solution is to use the React 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  width  setWidth    useState 0     const elementRef   useRef null      useEffect      gt        setWidth elementRef current getBoundingClientRect   width               empty dependency array so it only runs once at render    return        lt div ref  elementRef  gt         width       lt  div gt

User · Answer

This is basically Marco Ant  nio s answer for a React custom hook  but modified to set the dimensions initially and not only after a resize   export const useContainerDimensions   myRef   gt      const getDimensions        gt         width  myRef current offsetWidth      height  myRef current offsetHeight         const  dimensions  setDimensions    useState   width  0  height  0       useEffect      gt        const handleResize        gt          setDimensions getDimensions               if  myRef current          setDimensions getDimensions               window addEventListener  resize   handleResize       return      gt          window removeEventListener  resize   handleResize              myRef      return dimensions       Used in the same way   const MyComponent        gt      const componentRef   useRef     const   width  height     useContainerDimensions componentRef     return        lt div ref  componentRef  gt         lt p gt width   width px lt  p gt         lt p gt height   height px lt  p gt       lt div  gt

User · Answer

A good practice is listening for resize events to prevent resize on render or even a user window resize that can bug your application    const MyComponent       gt      const myRef   useRef null     const  myComponenetWidth  setMyComponentWidth    useState        const handleResize       gt        setMyComponentWidth myRef current offsetWidth         useEffect      gt       if myRef current        myRef current addEventListener  resize   handleResize       return     gt         myRef current removeEventListener  resize   handleResize              myRef      return      lt div ref  MyRef  gt Hello lt  div gt

User · Answer

Actually  would be better to isolate this resize logic in a custom hook  You can create a custom hook like this   const useResize    myRef    gt      const  width  setWidth    useState 0    const  height  setHeight    useState 0     useEffect      gt        const handleResize        gt          setWidth myRef current offsetWidth        setHeight myRef current offsetHeight             window addEventListener  resize   handleResize       return      gt          window removeEventListener  resize   handleResize              myRef      return   width  height       and then you can use it like   const MyComponent        gt      const componentRef   useRef     const   width  height     useResize componentRef     return        lt div ref  myRef  gt         lt p gt width   width px lt  p gt         lt p gt height   height px lt  p gt       lt div  gt

User · Answer

This could be handled perhaps in a simpler way by using callback refs  React allows you to pass a function into a ref  which returns the underlying DOM element or component node  See  https   reactjs org docs refs-and-the-dom html callback-refs const MyComponent        gt        const myRef   node   gt  console log node   node innerText    NULL         return  lt div ref  myRef  gt Hello World lt  div gt       This function gets fired whenever the underlying node is changed  It will be null in-between updates  so we need to check for this  Example  const MyComponent        gt        const  time  setTime    React useState 123       const myRef   node   gt  console log node   node innerText    NULL         setTimeout      gt  setTime time 1   1000       return  lt div ref  myRef  gt Hello World  time  lt  div gt          Console output    Hello World 123  NULL   Hello World 124  NULL     etc       While this does t handle resizing as such  we would still need a resize listener to handle the user resizing the window  I m not sure that is what the OP was asking for  And this version will handle the node resizing due to an update  So here is a custom hook based on this idea  export const useClientRect        gt        const  rect  setRect    useState  width 0  height 0        const ref   useCallback node   gt            if  node     null                const   width  height     node getBoundingClientRect                setRect   width  height                               return  rect  ref       The above is based on https   reactjs org docs hooks-faq html how-can-i-measure-a-dom-node Note the hook returns a ref callback  instead of being passed a ref  And we employ useCallback to avoid re-creating a new ref function each time  not vital  but considered good practice  Usage is like this  based on Marco Ant  nio s example   const MyComponent     children     gt      const  rect  myRef    useClientRect      const   width  height     rect     return        lt div ref  myRef  gt         lt p gt width   width px lt  p gt         lt p gt height   height px lt  p gt         children       lt div  gt

[reactjs] How to get the width of a react element

Examples related to reactjs