-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feeds, infinite scrolling, lazy loading and rows with different heights #25
Comments
Hi @oyeanuj, Thank you! I think you could achieve this functionality with the current release of react-virtualized (unless I'm misunderstanding). Here's how I'd initially approach it... Firstly, do you know the total number of items your list could contain if the user scrolled all the way to the end? If so, just give react-virtualized that number as the This may not be what you had in mind though. Maybe you wanted the prefetching to occur way before the user reached the bottom of your list? In which case... you could do something similar but provide an arbitrarily high |
@bvaughn Thanks for the quick and detailed response! Few more follow-up questions -
Thanks again! |
No problem. :)
Hm. What if I added the ability to register an on-scroll callback? I could call it with a params object that had keys like
I think this approach is less ideal because the amount you had to add to X would vary depending on the height of the list and the height of individual rows.
Currently this is not supported. You would need to wrap the list/table in a container that listened for resize events and updated the width/height props. I've considered adding that wrapper component to react-virtualized myself but I haven't wanted to tackle any edge-cases it may introduce.
Only visible components are rendered. Let's say you have a list that's 100 pixels tall and a row-height of 10 pixels. That means that I will render 11 rows (to account for the fact that the top and bottom row may be partially visible). Then I rotate what those 11 rows display as a user scrolls up or down. (Does this answer your question?) |
Thanks again for the quick turnaround and patient answers :)
I think so! I could listen for a particular row number based on the row count I previously passed and then make a call when a certain rowStart/rowStop is true.
This would be really helpful, as I think a lot of people would end up re-implementing this on their own?
I see. Does that mean you create and destroy the content in those 11 rows or just show and hide? |
Okay. I'll add the callback support in a release soon so that you'll be unblocked. I'll consider the auto-size feature request. I'm not super excited about tackling that one but... if it's something that other people think would be useful as well I'd be willing to do it. Maybe you could request that as a separate issue and we can see if there's any other interest?
React creates new ReactElements all the time (as representations of the current state of ReactComponents). So I create N+1 ReactElements any time properties change (eg. scroll position). |
Actually as I sit down to think about this, I realize that I don't need to add any new properties. This is already possible using either the Let's say you have a Does this make sense? |
So are you suggesting a rowRenderer function wherein in addition to returning the element, it triggers a pre-fetching call?
Will create a separate issue. I figured it might be a slight deviation from the track of this plugin, so totally understand the hesitation. Thanks! |
Yes. That's kind of what I'm suggesting. Your rowRenderer function could On Tuesday, December 15, 2015, oyeanuj notifications@github.com wrote:
|
Cool, that could work. Although part of me feels that having a callback function allows for clearer separation of concerns (rendering vs side-effects) and cleaner rowRenderer function. Thanks again for the back and forth! |
Hm. I understand that argument. Let me take another look and unless I see a reason not to, I'll try to push out an update with this functionality sometime today. |
Added a new property to |
Add `onRowsRendered` to FlexTable and VirtualScroll
@bvaughn This library looks really interesting. I was wondering if it can be adapted (or functionality be added) to make it work for the use-case of lazy loading a list of items but without a fixed container height?
My use-case is similar to a feed like Facebook, or Twitter, where I have a list of items to show in the viewport, would like to not render things which are not in the visible area (lets say, defined as the viewport + x) and some support for pagination?
I know that might not be where you see this library headed but wondering if any of the above will be solved by the library.
Thanks again for this!
The text was updated successfully, but these errors were encountered: