3

I would like to create virtualized list. I have 100 000 items, but only e. g. 20 items (depends on window height) will be rendered. When user scrolls, no new items will be added, it only changes the props to those that are off the screen. So user see still right items.

I am using react-window library as alternative to react-virtualized:

import { FixedSizeList as List } from 'react-window'
...

const items = new Array(100000).fill({ title: '' })

const Item = ({ index, style }) => (
    <div key={index} style={style}>
        Item number {index}.
    </div>
)

const PageView = () => (
    <div style={{ overflowY: 'auto', height: '100vh' }}>
        <AnotherComponent />
        <AnotherComponent2 />
        <List itemSize={50} height={300} itemCount={items.length}>
            {Item}
        </List>
        <AnotherComponent3 />
    </Scrollable>
)

In this situation, the root div is full-screen scrollable element and List is 300px height also scrollable element. To remove scrolling from List I have to set height of List depends on count of items:

<List itemSize={50} height={items.length * 50} itemCount={items.length}>

Now scrolling is fine (scrollable is only root div), however List render all 100 000 items at once time, because they fit in the height of the List. Is there any way to work with List with custom scrolling element (or window) like in this react-virtualized example with WindowsScroller or I have to use react-virtualized?

Michal
  • 1,755
  • 3
  • 21
  • 53

0 Answers0