Skip to content

0.20.0

Compare
Choose a tag to compare
@inokawa inokawa released this 07 Jan 12:10
· 491 commits to main since this release

BREAKING CHANGES

  • Incomplete padding support was dropped from VList. Use Virtualizer and startMargin/endMargin prop instead.
// VList
<VList style={{ paddingTop:20, paddingBottom: 40 }}>
 {createRows(1000)}
</VList>

// Virtualizer
<div style={{ overflowY: 'auto', overflowAnchor: "none" }}>
  <div style={{ height: 20 }}/>
  <Virtualizer startMargin={20} endMargin={40}>
   {createRows(1000)}
  </Virtualizer>
  <div style={{ height: 40 }}/>
</div>
  • components.Root prop of VList was removed. Use Virtualizer instead. If you want to customize scrollable element, just pass props to wrapper div. If you want to customize inner element, use as prop of Virtualizer.
// VList
<VList components={{ Root: ViewportComponent }}>
 {createRows(1000)}
</VList>

// Virtualizer
<div style={{ overflowY: 'auto' }}>
  <Virtualizer as={ContainerComponent}>
   {createRows(1000)}
  </Virtualizer>
</div>
  • WVList was renamed and changed to WindowVirtualizer because it has similar usability to Virtualizer. It's wrapper div was removed so add it by yourself if you need to apply some styles.
// WVList
<div style={{ padding: 200 }}>
  <WVList style={{ border: "solid 1px gray" }}>
   {createRows(1000)}
  </WVList>
</div>

// WindowVirtualizer
<div style={{ padding: 200 }}>
  <div style={{ border: "solid 1px gray" }}>
    <WindowVirtualizer>{createRows(1000)}</WindowVirtualizer>
  </div>
</div>
  • components.Item prop of VList was renamed to item
  • initialItemSize prop was renamed to itemSize
  • onScrollStop prop was renamed to onScrollEnd

What's Changed

Full Changelog: 0.19.2...0.20.0