Autosizer: Add :onResize property about react-virtualized HOT 10 CLOSED

Hey @Strate,

Help me understand- how would you use this callback?

AutoSizer is meant to decorate a child and manage its size. So in that sense a callback isn't necessary- because you have width and height props.

from react-virtualized.

I am working on a high-order wrapper of VirtualScroll component, which handles pagination.
It has a flip option, which displays list in reverse order. In that case, pagination should be triggered when user scrolls to top of list, and initial scroll position should be on bottom.
But sometimes, my component mounts to DOM in invisible state, and AutoSizer sets height to 0. In that case clientHeight also becomes 0.
I would use that callback to handle that list becomes visible and manually set scrollTop to right value.

from react-virtualized.

Thanks for elaborating. I'm curious to see your HOC when it's done, if you feel like sharing.

I wonder if you couldn't achieve the result you're looking for using the onRowsRendered callback. (The first time any rows are rendered- you know your height is greater than 0, and you could set the scrollTop- or even easier, the scrollToRow- to point at the last/bottom row. Thoughts?

from react-virtualized.

I have already wrote a little handler, which can be used like that:

<AutoSizer>
  <SizeChangeHandler onChange={this.handleSizeChange}>
    <VirtualScroll {...props} />
  </SizeChangeHandler>
</AutoSizer>

I think that code of SizeChangeHandler is trivial. But also I think that adding that super-simple functionality to AutoSizer would made things better ;)

from react-virtualized.

Yeah fair enough. :)

It would be trivial to add. I just like to explore solutions within the existing framework when possible because even small features add to complexity, size, etc.

I'm going to tag this as an enhancement ticket. I'd like to give it some thought before committing to do it because it still feels a little odd for me from an API standpoint (although I think your use case makes sense). I'm also currently in the middle of working on v5 and trying to address a scrolling performance issue that I'd like to wrap up first.

from react-virtualized.

Hey @Strate,

I just released version 5. I think the HOC change should make what you're describing much simpler now- to the point where I don't think AutoSizer will need to directly support callback property. Basically the way AutoSizer works in version 5 is like this:

<AutoSizer>
  {({ height, width }) => (
    <ArbitraryChild {...props}/>
  )}
</AutoSizer>

That means you can now use AutoSizer to control multiple children at once, or in your case, to also invoke a callback:

<AutoSizer>
  {({ height, width }) => (
    <div>
      <SizeChangeHandler
        onChange={this.handleSizeChange({ height, width })}
      />
      <VirtualScroll
        width={width}
        height={height}
        {...props}
      />
    </div>
  )}
</AutoSizer>

I'd love to hear your thoughts.

from react-virtualized.

Hi @bvaughn,

Firstly, thank you for version 5 :-)
Secondly, thank you for hinting about ability to pass callback as a children to element. It would be really applicable in my applications ;-)

And, what about to your proposed solution.
As for me, it look like more verbose to usage, if compared to my own. Having property onChange on AutoSizer itself would be more prettier. Own property makes DOM lighter (no extra div needed, and no extra <noscript> rendered for SizeChangeHandler).

from react-virtualized.

You're welcome. Thank you for the kind words as well. :)

And fair enough. I'll give this ticket a bit more thought. :)

from react-virtualized.

Look for this to go out momentarily with the 5.2.0 release.

from react-virtualized.

Very nice, thank you!

from react-virtualized.