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:
- https://unpkg.com/react-salvager/dist/react-salvager.js
- https://unpkg.com/react-salvager/dist/react-salvager.min.js
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 http://localhost:3000/example/.
Note that the server itself is actually a webpack-dev-server with react hot loading enabled, so you can use this setup for development too.
Props
bufferSize- Optional Number of row rendered to the DOM. Defaults to50.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).
Example
// Note that row items can be any valid React element.
<Salvager
bufferSize={25}
rowWrapperStyle={{
listStyleType: 'none',
marginBottom: 0,
marginTop: 0,
paddingLeft: 0
}}
visibleAreaStyle={{
backgroundColor: '#fff',
border: '1px solid #ddd',
height: 400,
width: 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>Karma is used to run the tests in real browsers, since we need to read offsetHeight and something like jsdom doesn't implement what we need yet.
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.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent