react-variable-height-infinite-scroller
An infinite scroller especially made for variable row heights (no precomputation of row height necessary).
See a Demo
Why
Because sometimes you don't know the size of the rows you're going to render before rendering
Install:
npm i --save react-variable-height-infinite-scroller
Usage:
<InfiniteScroller
averageElementHeight={100} // this is a guess you make!
containerHeight={600}
rowToJumpTo={rowToJumpTo} // (optional) set this if you want to start/jump to a a particular row. Must be passed as a new object each time to allow for difference checking
renderRow={renderRow} // function to render a row
totalNumberOfRows={fakeRows.length} // an array of data for your rows
/>
Props
Name | Default | Description |
---|---|---|
containerHeight number |
required | Maximum height of the scroll container |
totalNumberOfRows number |
required | Length of the data array |
renderRow function |
required | Function to render a row |
averageElementHeight number |
(optional) 100 | This is a guess you make of what the average row height will be height. This is used to approximate how far to move the scrollbar |
rowToJumpTo | (optional) 0 | Object of shape { row: Number } . Row you want to start with or jump to. Must be passed as a new object each time to allow for difference checking |
jumpToBottomOfRow boolean |
(optional) false | By default jumping to a row jumps to the top. Set to true if you want to jump to the bottom of the row |
containerClassName string |
(optional) infiniteContainer | className to apply on container |
onScroll function |
(optional) no-op | Hook to call on scroll |
Methods
Name | Description |
---|---|
scrollTo | Alternate way to jump to a particular row. Usage below. |
scrollTo usage*:
{ thislist; } { return <div> Here is my list: <InfiniteScroller length=100 itemRenderer=... ref= thislist = c /> <button onClick=::thisscrollSomewhere>Scroll Somewhere</button> </div> ; }
Taken from the demo code:
;; { let newFakeRows = ; for let i = 0; i < numberOfRows; i++ newFakeRows; return newFakeRows;} const Example1 = React; React;
Contributing
Changelog is now autogenerated. So commits have to be prefixed by one the four following prefixes to get added to the changelog:
[added]
added a new feature[changed]
changed an existing feature[fixed]
fixed a bug[removed]
removed something or a file
Run npm test
to lint
Changelog:
*(taken from "react-list")