Add option childrenRenderer

README.md

@@ -157,6 +157,10 @@ Defaults to `150` (in milliseconds). On Apple and some other devices, scroll is
 #### String `className`
 Allows a CSS class to be set on the scrollable container.
 
+#### Function `childrenRenderer(children)`
+Defaults to `undefined`, which can be used to provide custom wrapper to children items,
+such as `<table>{children}</table>` or `<ul>{children}</ul>`.
+
 ## Sample Code
 
 Code samples are now available in the `/examples` directory for your perusal. Two examples are provided, one for constant height with infinite loading and another with random variable heights with infinite loading. To generate the files necessary for the examples, execute `npm install && gulp build -E`. You may need to first install `gulp` with `npm install -g gulp`.

__tests__/infinite_test.js

@@ -72,6 +72,19 @@ describe('Rendering the React Infinite Component Wrapper', function() {
     expect(infinite.props.className).toEqual('correct-class-name');
   });
 
+  it('customizes children rendering', function() {
+    var infinite = TestUtils.renderIntoDocument(
+        <Infinite elementHeight={200}
+                  containerHeight={800}
+                  childrenRenderer={(children) => (<table className="custom-container">{children}</table>)}>
+          <div/>
+          <div/>
+        </Infinite>
+      );
+
+    expect(TestUtils.findRenderedDOMComponentWithClass(infinite, 'custom-container')).not.toBeUndefined();
+  });
+
   it('allows preloadBatchSize to be zero', function() {
     var renderedInfinite = TestUtils.renderIntoDocument(<Infinite elementHeight={[28, 28]} containerHeight={100}
                              preloadBatchSize={0}>

src/react-infinite.jsx

@@ -40,6 +40,7 @@ var Infinite = React.createClass({
     // of
     containerHeight: React.PropTypes.number,
     useWindowAsScrollContainer: React.PropTypes.bool,
+    childrenRenderer: React.PropTypes.func,
 
     displayBottomUpwards: React.PropTypes.bool.isRequired,
 
@@ -444,7 +445,7 @@ var Infinite = React.createClass({
         <div ref="topSpacer"
              style={this.buildHeightStyle(topSpacerHeight)}/>
         {this.computedProps.displayBottomUpwards && loadingSpinner}
-          {displayables}
+          {this.computedProps.childrenRenderer ? this.computedProps.childrenRenderer(displayables) : displayables}
         {!this.computedProps.displayBottomUpwards && loadingSpinner}
         <div ref="bottomSpacer"
              style={this.buildHeightStyle(bottomSpacerHeight)}/>