inokawa/virtua 0.45.0

on GitHub

const items = [...]

// before
<VList count={items.length}>
  {(i) => <div key={i}>{items[i]}</div>}
</VList>

// after
<VList data={items}>
  {(item, i) => <div key={i}>{item}</div>}
</VList>
// ...or you can migrate like this for now (will be removed in the future)
<VList data={{ length: items.length }}>
  {(_, i) => <div key={i}>{items[i]}</div>}
</VList>


// If you want to display header or footer with index, we recommend migrating to Virtualizer with startMargin
<div style={{ overflowY: 'auto', overflowAnchor: 'none', height: '100%' }}>
  <Header />
  <Virtualizer data={items} startMargin={headerHeight}>
    {(item, i) => <div key={i}>{item}</div>}
  </Virtualizer>
  <Footer />
</div>
// or you can pass elements to children
<VList>
  <Header />
  {items.map((item, i) => <div key={i}>{item}</div>)}
  <Footer />
</VList>