0

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

enter image description here

user3844198
  • 205
  • 2
  • 6
  • 15
  • 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](https://facebook.github.io/react/docs/refs-and-the-dom.html). – Michael Lyons May 31 '17 at 17:26
  • `innerHeight` can be used for `document.window`. Other DOM elements have `clientHeight` https://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight – pscl May 31 '17 at 19:37

2 Answers2

2

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

Or go npm shopping for any number of variations.

pscl
  • 3,322
  • 25
  • 29
  • react-height looks really nice but as I can see, this solution currently doesn't respond to window resize etc. – user3844198 May 31 '17 at 17:45
  • Good point. Looks like they could use an event on window.onresize https://github.com/nkbt/react-height/blob/master/src/ReactHeight.js – pscl May 31 '17 at 17:50
  • the question is what to use to have resize support. Mentioned code uses getElementHeight as a props function. I know that I can add resize listener on component lifecycle hook with specific method like getElementHeight but I'm not especially experienced when it comes to the React. That's why I'm asking. – user3844198 May 31 '17 at 18:41
  • 1
    It would look quite similar to what @Jon has suggested below. Your choice as to whether to do it once in your parent component, or make it into a reusable wrapper like in the example (react-height). Either way your parent component will be notified through a callback. – pscl May 31 '17 at 19:33
1

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;
}

componentDidMount() {
   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.

Jon
  • 5,945
  • 4
  • 21
  • 31
  • Yea, that's an idea of how to solve this problem but what with performance ? Resize is very often considered as squishy. – user3844198 May 31 '17 at 17:34
  • using window.resize with underscore or lodash debounce / throttle functions should help to avoid costly calculations while the window size is in flux – user3844198 May 31 '17 at 20:21