Advanced Search

React: Get width, height, and coordinates of a react object

/ Published in: JavaScript
Save to your folder(s)
Use ref with getDOMNode() to get the actual html.
Using getBoundingClientRect() on the actual html will give you the width, height, etc.

Below:
specs = ClientRect {} bottom: 269 height: 18 left: 797.546875 right: 1062.609375 top: 251 width: 265.0625__proto__: ClientRect

console.log(specs.bottom) will return 269

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. getCoordinates: function(){
  2.   var dropMen = this.refs.targetDiv.getDOMNode();
  3.   var specs = dropmen.getBoundingClientRect();
  4. }
  5.  
  6. render: function(){
  7.   return <div ref="targetDiv"></div>
  8. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.