react-virtualized | React components for efficiently rendering large lists | Grid library

according to VirtualizedSelect docs here https://www.npmjs.com/package/react-virtualized-select, the component accept array of objects like :

I finally found a solution after much agony.

Apparently, Nextjs wraps the entire layout with a div with id __next. That's the outer-most container of the entire page, and its height is not set, so since the content of FixedSizeList is positioned such that it's outside of the regular page flow, the __next div gets a height of 0.

I don't know if there is any better solution, but I simply added this little style in the globals.css file:

Finally, solved the issue (not sure if this is the right way). The solution was to pass ref as react virtualized scrolling wrapper div instead of react-virtualized main wrapper div.

I had updated the above sandbox with the fix.

Before

from the image you attached it seems like your images are not dynamically measured. consider adding this library

you need to add something like this:

You are loading a new page on every scroll interaction. If the user scrolls down by 5 pixels, do you need to load an entire page of data? And then another page when the scrolls down another 2 pixels? No. You only need to load a page when you have reached the end of the available rows.

You could use some math to figure out which pages need to be loaded based on the scrollTop position in the onScroll callback and the rowHeight variable.

But react-virtualized contains an InfiniteLoader component that can handle this for you. It will call a loadMoreRows function with the startIndex and the stopIndex of the rows that you should load. It does not keep track of which rows have already been requested, so you'll probably want to do that yourself.

Here, I am storing the API responses in a dictionary keyed by index, essentially a sparse array, to support any edge cases where the responses come back out of order.

We can check if a row is loaded by seeing if there is data at that index.

We will load subsequent pages when the loadMoreRows function is called by the InfiniteList component.

You cannot use useState in non functional component. You're using it in a method called HandleAdd. HandleAdd is not a component! You're using classify component. You need to move the HandleAdd into your component and use the class component's own state and setState :

You call AllRows without proprty, in this case tracks is undefined ==> you will have the error tracks.map is not a function

to avoid that, call AllRows with an array :

You just need to add data property to Row component props.

There isn't a way to do that within your own package.json as far as I am aware. The change would need to happen in the package.json for the react-virtualized package. Perhaps one of these alternatives will work for you:

1. Set legacy-peer-deps in a .npmrc file for your project. This won't work if people are installing your project via npm but if your project is cloned from a git repository or otherwise downloaded, and then people run npm install from there, including a .npmrc in the project should work.

2. Require using npm@6 which will be more lenient about peer dependency checks. You can specify the npm version in the "engines" field in your package.json.

3. Install react-virtualized from GitHub. The master branch (and, as of this writing, unfortunately only the master branch) has the d36509817ac44 commit which added react@17 and react-dom@17 as acceptable peer dependencies. Because this code is not in any release yet, you may be getting a version of the module that is unstable. To do this: npm install git+https://github.com/bvaughn/react-virtualized.git

4. Use react@16 and react-dom@16 instead of @17 for each.