souporserious/react-measure

Question: rationale behind v2

Closed this issue · 4 comments

tnrich commented

Hey there,

I was just curious about what prompted the rewrite to v2 of react-measure. Could you explain a bit about why the new api is better?

Thanks!

souporserious commented

Yes, definitely! The biggest gain from the new version, is the removal of findDOMNode. This was blocking people from being able to write certain tests, mainly with Jest. This actually helped simplify things in my opinion, because now we can be explicit with what component we want to measure.

The new version also introduces a HoC (Higher-order Component). So now you can take measurements of a custom component a little easier, mainly the fact that you don't have to hook into onResize and set up state, you can just wrap a component and receive props. This ended up working out really well and now Measure is a simple wrapper around withContentRect.

The way dimensions are calculated changed, this was due to personal use of the component and needing different measurements. I landed on just giving you a way to get every possible DOM box model measurement so you could do whatever you need with those calculations.

Sorry if it was a big jump out of nowhere 😞 I've been super busy so I wanted to try and get it out while I had the chance. Thanks for filing this! I hope it helps explain a bit of the reasoning behind the changes. I'm always open for critique, so please let me know if you have any troubles or think something can be better 🙏

  • 👍1
designbyadrian commented

I keep getting height 0, so I'm not sure if I'm doing it properly... downgraded to 1.4 which I find is easier to use.

  • 👍1
souporserious commented

Interesting.. would you mind pasting the code that gives you that result @designbyadrian? I'll try and look into it to see where the regression it.

johnryan commented

@souporserious I'm seeing the same issue, i have something like this:

    <Measure
        bounds
        onResize={(contentRect) => {
           resizeHeight(contentRect.bounds.height);
        }}
      >
        {({ measureRef }) =>
          (<div ref={measureRef}>
            {content}
          </div>)
        }
    </Measure>

I'm seeing all the values as 0 except for "right" which is strangely set correctly. Is this the correct usage? Maybe the issue is caused by the component hierarchy?