7.0.0

This release includes a lot of features and improvements.

Breaking

• spacerElement and spacerStyle props was removed in favour to use renderSpacer prop. You can use renderSpacer=(({ ref, style }) => (<SpacerElement ref={ref} style={{ ...style, ...spacerStyle }}>)} to achieve prevous behaviour.
• viewportRef default value was removed. (it was document.documentElement). If you not specify viewport Ref closest scroll parent will be found automatically. You can use vewportRef={{ current: document.documentElement }} to achieve prevous behaviour
• itemMinSize renamed to itemSize due it's not a "minimum size" since last releases.
• margin renamed to itemMargin
• 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 support display: contents or other cases when element.getBoundingClientRect() returns "bad" data. (see #54)

Migration

1. If you use itemMinSize or margin props just rename them to itemSize and itemMargin respectively.
2. If you use spacerElement or spacerStyle props change them to renderSpacer prop.
3. If you use window scroller and you not provide viewportRef you can keep it as is. ViewportList automatically detect scroll container. You can add vewportRef={{ current: document.documentElement }} to avoid detection if scroll container detection is incorrect.
4. If you use default import you should change it to named import: import { VIewportList } from 'react-viewport-list';.

New Contributors

• @zerosoul made their first contribution in #58

Full Changelog: 6.3.0...7.0.0