Comments (10)
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.
Related Issues (20)
- Access to Multigrid public method recomputeGridSize() returns undefined
- Version 9.22.5 is a ghost not visible in this repository?
- Height Issue after rendering
- Virtualisation fail ? Why invisible content is added to my list ?
- react18.2.0 HOT 1
- Tips for displaying a dropdown to overflow the React Virtualized container without being hidden?
- Failed to fetch dynamically
- The styles.css isn't part of the 9.23.0 version
- How to load JSON-formatted data virtually?
- TypeError : RegisterChild in WindowScroller
- Props ScrollElement of WindowScroller load every items if parent is InfiniteLoader HOT 2
- Autosizer component does not accept any refs or spread props.
- Change scrolling approach for Table component HOT 1
- Table's data columns are not resized until scrolling the content [regression]
- `scrollToRow()` on `List` with `WindowScroller` not working HOT 3
- How to use search functionality similar to ctrl+f using react-virtualized HOT 1
- Rows with dynamic height overlap when using CellMeasurer HOT 1
- React Virtualized List - Scroll jumps to top when data updated HOT 3
- Grid/MultiGrid: TypeError: Super expression must either be null or a function HOT 1
- `WindowScroller` increases `scrollTop` value when a list row gets expanded
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-virtualized.