AutoSizer

[bvaughn]

Document an AutoSizer solution built with react-measure (based on the Resize Observer spec, can be polyfilled). This seems like a more future-friendly way of detecting resize.

For the moment, I have published a standalone version of the AutoSizer component from react-virtualized, as react-virtualized-auto-sizer.

[wuweiweiwu]

If you haven't coded this up yet. I'd pick it up. I've been meaning to try out react-measure.

[bvaughn]

Nice! Reach out to Travis (@souporserious). He and I have been talking about this a bit.

My latest thinking is that react-window doesn't need an AutoSizer component. Instead, we can just document how to use react-measure for this purpose. (Maybe we could even release a light-weight wrapper component, but I don't think it should be in the main library- at least I'm not thinking that yet.)

[wuweiweiwu]

I see. Will do. I'll send him an email after I get a bit more familiar with react-measure.

I'm kinda curious on how we can measure the parent node or how to pass the measureRef to the parent node

[bvaughn]

I was curious about the same thing! Here's what he said about it:

Ah I think I see what you mean now. Yeah let me update the repo this next week and I'll show you how the new API allows this. I give you a "formula" option now for every measureRef that you can customize how the measurements are handled, so in AutoSizers case we can use a custom formula that looks at it's parent's measurements and reports them when they change. Might need some tweaking, but I think it should work fine.

I love the idea of working with Travis on this because (1) this isn't a windowing problem, so it's nice to not have to own it in this library and (2) his approach seems more future looking than the one CellMeasurer used.

[wuweiweiwu]

That sounds really promising!

I'm going to test out a wrapper component that just calls the measureRef on the parent node. I wonder if that'll work.

I'll post a sandbox

[souporserious]

Oh man, my apostrophe usage 🤦‍♂️ 💩

@wuweiweiwu glad to hear you're interested! I need to update the rewrite PR with some new code still. I have some time tomorrow night and should be able to get that done. I'd love feedback from either of you if you'd like to help, I'll reach out soon when it's updated so we can hopefully land on good solution 🤞.

[wuweiweiwu]

@souporserious Awesome! I look forward to it. I still have to get more familiar with react-measure under the hood :)

@bvaughn I make a janky proof of concept that works with some hacky code and a wrapper around Measure https://codesandbox.io/s/xll21o5lo4 . I would definitely prefer the formula option though

[souporserious]

@wuweiweiwu nice work!!! That's similar to what I was thinking. Just a small note, there's a new API in the works that can be installed under an rc tag, it's slightly different from the old one. You can get to it in the dropdown in codesandbox when adding the package. I like the idea of just grabbing the parentNode and passing that to measureRef though! Maybe I can make some tweaks to react-measure to make that work easier 🤔.

I threw together a quick sandbox as well here: https://codesandbox.io/s/mzzzz5xmq9

That's wrapping two nodes though so it's not the nicest API. The one problem I'm foreseeing with the formula option is it won't be observing the parent's node for changes, you can only use that to grab the parent dimensions... so the other way this could work is by passing down the API. Wondering how you both feel about something like this 👇

<AutoSizer>
  {({ bindParent, bindChild, width, height }) => (
    <div {...bindParent}>
      <div {...bindChild}>
        {width} x {height}
      </div>
    </div>
  )}
</AutoSizer>

It's not my favorite though 😏 so maybe some react-measure tweaks with grabbing the parentNode and passing that to measureRef might be best.

[bvaughn]

I'm not sure I see how this example ^ is that different from passing measureRef? In both cases, AutoSizer is measuring its child rather than its parent. So you have to worry about passing through the additional params.

The reasons that seems unfortunate to me are:

• You need to handle more params in the child function.
• Your AutoSizer is less reusable since it has to e.g. set a style like flex: 1 1 auto or something on the top level wrapper. (What if you want to use this outside of a flex container?)
• It complicates the process of getting a ref to the inner e.g. list. (You'd have to use the new forwardRef API but that limits you to 16.3+.)

[souporserious]

Yeah, that's similar to what I was thinking. I think I'll stick with the parentNode approach. Maybe I can add an easier imperative way to do it in react-measure for cases like AutoSizer. I'll mess around with some things tonight and get back to you.

[wuweiweiwu]

@souporserious awesome! please keep me up to date as well :)

[techniq]

@vx/responsive has a ParentSize component that is also a lightweight wrapper around the Resize observer spec as well, although I've been eyeing the rewrite of react-measure and considering talking with @hshoff about adopting it. Also need to make sure it plays well with bounding box for tooltips/etc.

I've used both react-virtualized's AutoSizer and and @vx/respnosive's ParentSize with my mui-table component and have had good success. I currently use ParentSize in some non-open source code, although I've had an issue with Flexbox styling and resizing smaller (bigger typically works).

[souporserious]

Hey @techniq love to hear that you're considering react-measure! Sorry, I've been slacking on the rewrite. I've been super busy with my main job, I keep pushing it off 😞. It's my next priority to wrap up though. We've been using it in our UI kit on my team at work for tooltips and popovers so hopefully it should translate well for your needs.

I've looked at the ParentSize component in the past for inspiration. Maybe if they are interested, once the new react-measure version is out, I could PR to use it for the measuring portion.

[techniq]

@souporserious PR would be awesome when you have time.

There is a semi-related issue regarding porting more components to use render props (instead of HOCs). ParentSize was ported a while back (HOC is still available) but those listed in the issue are related (ScreenSize = window/viewport as parent, bounding box handling, all related to chart sizes and tooltips).

Completely understand putting your bill-paying job first, I'm in the same boat 😉 (wish I had more time for open source, and current job doesn't directly support working on it beyond using it to accomplish tasks).