diff --git a/README.md b/README.md
index 3868ccc..098b60a 100644
--- a/README.md
+++ b/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 `
` or ``.
+
## 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`.
diff --git a/__tests__/infinite_test.js b/__tests__/infinite_test.js
index c9544e0..c9f7696 100644
--- a/__tests__/infinite_test.js
+++ b/__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(
+ ()}>
+
+
+
+ );
+
+ expect(TestUtils.findRenderedDOMComponentWithClass(infinite, 'custom-container')).not.toBeUndefined();
+ });
+
it('allows preloadBatchSize to be zero', function() {
var renderedInfinite = TestUtils.renderIntoDocument(
diff --git a/src/react-infinite.jsx b/src/react-infinite.jsx
index 86cff66..eef87c5 100644
--- a/src/react-infinite.jsx
+++ b/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({
{this.computedProps.displayBottomUpwards && loadingSpinner}
- {displayables}
+ {this.computedProps.childrenRenderer ? this.computedProps.childrenRenderer(displayables) : displayables}
{!this.computedProps.displayBottomUpwards && loadingSpinner}