javascript - JS, React - calculate height of dynamically created area with div blocks - Stack Overflow

I'm looking for a JS / React solution to count height or lines number of draggable div blocks (having different width). Height is needed to calculate the content height inside dashed border which is equal to (viewport - draggable_blocks_height).

As you can imagine, calculation should work dynamically during the window sizing / changing resolution and during dragging the blocks / removing or adding to the draggable_blocks_container.

Any ideas, concepts or similar examples? Thank you

I'm looking for a JS / React solution to count height or lines number of draggable div blocks (having different width). Height is needed to calculate the content height inside dashed border which is equal to (viewport - draggable_blocks_height).

As you can imagine, calculation should work dynamically during the window sizing / changing resolution and during dragging the blocks / removing or adding to the draggable_blocks_container.

Any ideas, concepts or similar examples? Thank you

• javascript
• reactjs

Share Improve this question Follow asked May 31, 2017 at 17:21 user3844198user3844198 20522 gold badges66 silver badges1515 bronze badges 2

• You can place a ref on the container of the floating divs and get the height of the div via the innerHeight property whenever data/sizes change. React Ref Docs. – Michael Lyons Commented May 31, 2017 at 17:26
• innerHeight can be used for document.window. Other DOM elements have clientHeight stackoverflow./questions/22675126/… – pscl Commented May 31, 2017 at 19:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

https://www.npmjs./package/react-height

Or go npm shopping for any number of variations.

I would assign a ref to a wrapper div. Then write a function that gets the height of the ref and run that func on window resize. Something like...

<dif ref={(div) => this.Wrapper = div}>
  {/* blocks */}
</div>

function calcHeight() {
  const rect = this.Wrapper.getBoundingClientRect();

  return rect.height;
}

ponentDidMount() {
   window.addEventListener('resize', this.calcHeight());
}

A bit confused on what you want to do, but if you want to mirror the height in another div, set the calculated height to state and then use a style prop to control the height of the 2nd div.