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

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 = () => {
    const myRef = node => console.log(node ? node.innerText : 'NULL!');
    return <div ref={myRef}>Hello World</div>;
 }

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 = () => {
    const [time, setTime] = React.useState(123);
    const myRef = node => console.log(node ? node.innerText : 'NULL!');
    setTimeout(() => setTime(time+1), 1000);
    return <div ref={myRef}>Hello World {time}</div>;
}
/*** 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 = () => {
    const [rect, setRect] = useState({width:0, height:0});
    const ref = useCallback(node => {
        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}) => {
  const [rect, myRef] = useClientRect();
  const { width, height } = rect;

  return (
    <div ref={myRef}>
      <p>width: {width}px</p>
      <p>height: {height}px</p>
      {children}
    <div/>
  )
}

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

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

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

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

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

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

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

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

Examples related to reactjs