0.20.0
BREAKING CHANGES
- Incomplete padding support was dropped from
VList
. UseVirtualizer
andstartMargin
/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 ofVList
was removed. UseVirtualizer
instead. If you want to customize scrollable element, just pass props to wrapper div. If you want to customize inner element, useas
prop ofVirtualizer
.
// 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 toWindowVirtualizer
because it has similar usability toVirtualizer
. 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 ofVList
was renamed toitem
initialItemSize
prop was renamed toitemSize
onScrollStop
prop was renamed toonScrollEnd
What's Changed
Full Changelog: 0.19.2...0.20.0