7.0.0-beta.0
oleggrishechkin
released this
13 Feb 18:04
·
45 commits
to master
since this release
This release includes a lot of features and improvements.
Breaking
spacerElement
andspacerStyle
props was removed in favour to userenderSpacer
prop. You can userenderSpacer=(({ ref, style }) => (<SpacerElement ref={ref} style={{ ...style, ...spacerStyle }}>)}
to achieve prevous behaviour.viewportRef
default value was removed. (it was document.documentElement). If you not specifyviewport Ref
closest scroll parent will be found automatically. You can usevewportRef={{ current: document.documentElement }}
to achieve prevous behaviouritemMinSize
renamed toitemSize
due it's not a "minimum size" since last releases.margin
renamed toitemMargin
- default export was removed. Use named import instead:
import { VIewportList } from 'react-viewport-list';
Featues
- Added
renderSpacer
prop instead of spacerElement and spacerStyle for spacers customizations. - Added
count
property if you can't use items (usefull for skeletons) - Added
scrollToIndex
delay
option to set delay for scrollToIndex - Added
scrollToIndex
prerender
option to render more than one element on initial render/scrollToIndex (avoid content flushing on scrollToIndex/initial render) - Added automatic scroll container (viewport) detection by default if viewportRef not specified
- Moved scroll to index logic into layoutEffect or call sync on scrolToIndex method to avoid flushing of incorrect content
- Added
indexesShift
prop to support shift/unshift items. Every time you unshift (prepend items) you should increase indexesShift by prepended items count. If you shift items (remove items from top of the list you should decrease indexesShift by removed items count). (see #52) - Added
getItemBoundingClientRect
prop to supportdisplay: contents
or other cases whenelement.getBoundingClientRect()
returns "bad" data. (see #54)
Migration
- If you use
itemMinSize
ormargin
props just rename them toitemSize
anditemMargin
respectively. - If you use
spacerElement
orspacerStyle
props change them torenderSpacer
prop. - If you use window scroller and you not provide
viewportRef
you can keep it as is. ViewportList automatically detect scroll container. You can addvewportRef={{ current: document.documentElement }}
to avoid detection if scroll container detection is incorrect. - If you use default import you should change it to named import:
import { VIewportList } from 'react-viewport-list';
.