I'm trying to use Element.getBoundingClientRect() to get the x, y, top, left value of dom element.

const editorRef = useRef() 
... // attatched editor ref on the dom element that I'm interested
... 
editorRef.current.focus() // works well 
const editorNodeRect = editorRef.current.getBoundingClientRect() // got error saying getBoundingClientRect() is not a function 

so I tried this way by select the node by query

const editorNodebyQuery =document.querySelectorAll(".DraftEditor-root")[0];
const editorNodebyQueryRect = editorNodebyQuery.getBoundingClientRect() // work well!! 

but I don't like to access the dom node by query.. I think it's heavy.. I want to use the useRef.

first rootEditorNode is what I got by querySelector and it have getBoundingClientRect() function second editorRef.current is what i got by useRef and it doesnt have getBoundingClientRect() funcion.

I just want to know how to use getBoundingClientRect() function with useRef()

I'm trying to use Element.getBoundingClientRect() to get the x, y, top, left value of dom element.

const editorRef = useRef() 
... // attatched editor ref on the dom element that I'm interested
... 
editorRef.current.focus() // works well 
const editorNodeRect = editorRef.current.getBoundingClientRect() // got error saying getBoundingClientRect() is not a function 

so I tried this way by select the node by query

const editorNodebyQuery =document.querySelectorAll(".DraftEditor-root")[0];
const editorNodebyQueryRect = editorNodebyQuery.getBoundingClientRect() // work well!! 

but I don't like to access the dom node by query.. I think it's heavy.. I want to use the useRef.

first rootEditorNode is what I got by querySelector and it have getBoundingClientRect() function second editorRef.current is what i got by useRef and it doesnt have getBoundingClientRect() funcion.

I just want to know how to use getBoundingClientRect() function with useRef()

• javascript
• reactjs
• dom
• react-hooks

• Can you please provide the full relevant code? The strategy you are describing should work fine (as demonstrated in this codesandbox). – mgarcia Commented Mar 7, 2020 at 12:34

1 Answer 1

Most probably your editorRef is pointing to a React ponent than a DOM element. you can get the element like this

var element=ReactDOM.findDOMNode(editorRef.current);
var rect =element.getBoundingClientRect();

but ReactDOM.findDOMNode is deprecated in strict mode(remended to use)

<React.StrictMode></React.StrictMode>

so better way is to use forwardRef if you have access to the Child Component, another option is use a wrapper div which wraps the Child Component and use useRef like this

<div ref={editorRef} >
<ChildComp/>
</div> 

this will allow you to access getBoundingClientRect() might return wrong size(rect.top 0, rect.height 0 etc) in that case you need to call it with a delay

useEffect(() => {

setTimeout(() => {
   var rect = editorRef.current.getBoundingClientRect();
}, 300);

  }, [ ]);