1

Was trying to use getBoundingClientRect like:

const menuWrapper = useRef<HTMLElement>(null);
const parentNode = menuWrapper?.current?.parentNode;

const { top, left, height, width } = parentNode?.getBoundingClientRect();

return (
   <div ref={menuWrapper}>
     ...
   </div>
)

But currently can't pass typescript error: Property 'getBoundingClientRect' does not exist on type 'ParentNode'. Anyone that know a way around this?

Enis
  • 13
  • 4
  • Does this answer your question? [react: element.getBoundingClientRect is not a function](https://stackoverflow.com/questions/51963089/react-element-getboundingclientrect-is-not-a-function) – skyline3000 Jun 28 '22 at 15:21

1 Answers1

0

Try to use parentElement instead of parentNode.

const parentEl = menuWrapper?.current?.parentElement;

Also you can take a look at this to understand the difference.

But anyway, since you are using optional chaining, which means everything can be undefined, you can't use top, left, height, and width like this. At least you will need to add something like

if (!parentEl) {
  return;
}

before destructuring.

Avet Brutyan
  • 156
  • 4
  • Thanks Avet, checking if the parentEl is falsy and also adding: `const parentEl = menuWrapper?.current?.parentNode as HTMLElement;` helped passing the error. – Enis Jun 29 '22 at 09:25