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.

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

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. }
  6. render: function(){
  7. return <div ref="targetDiv"></div>
  8. }

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.