Reuse row elements when displaying large datasets. This is beneficial to performance since the number of row elements rendered to the DOM is fixed, no matter how big the dataset is.
The algorithm used in this port is simpler than the one used in the original salvager module. This came about after thinking more carefully about the minimal set of mutable state this port needed.
It's also worth noting that I'm not personally using this port in a production situation yet 😏
$ npm install react-salvager --save
There are also UMD builds available via unpkg:
If you use these, make sure you have already included React as a dependency.
There is a working example contained in the
example/ dir. To view it, start the server via
npm start, then point a browser at
bufferSize- Optional Number of row rendered to the DOM. Defaults to
rowWrapperStyle- Optional Extra style added to the row wrapper.
spacerStyle- Optional Extra style added to the spacer.
visibleAreaStyle- Optional Extra style added to the visible area (root node).
// Note that row items can be any valid React element.<SalvagerbufferSize=25rowWrapperStyle=listStyleType: 'none'marginBottom: 0marginTop: 0paddingLeft: 0visibleAreaStyle=backgroundColor: '#fff'border: '1px solid #ddd'height: 400width: 300><div key="1">Item 1</div><div key="2">Item 2</div>...<div key="9999">Item 9999</div><div key="10000">Item 10000<div></Salvager>
To run the tests locally using Chrome:
$ npm test -- local
Travis will also run the tests via Sauce Labs when changes are pushed. To view the code coverage report, open
coverage/html/index.html in a browser.