Nomenclature Predictably Misunderstood

    react-salvager

    6.0.0 • Public • Published

    react-salvager

    build status coverage status npm version npm downloads

    sauce test status

    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:

    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

    Install

    npm i react-salvager

    DownloadsWeekly Downloads

    4

    Version

    6.0.0

    License

    MIT

    Last publish

    Collaborators

    • tanem