react-salvager

A React port of salvager:

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 😏

Installation

$ 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.

Usage

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.

API

Props

• bufferSize - Optional Number of row rendered to the DOM. Defaults to 50.
• 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>

Testing

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.

License

MIT