diff --git a/docs/WindowScroller.md b/docs/WindowScroller.md
index 1251d7c3f..00faca9f9 100644
--- a/docs/WindowScroller.md
+++ b/docs/WindowScroller.md
@@ -1,16 +1,16 @@
WindowScroller
---------------
-High-order component that enables a `Table` or `List` component to be scrolled based on the window's scroll positions.
+A component that enables a `Table` or `List` component to be scrolled based on the window's scroll positions.
This can be used to create layouts similar to Facebook or Twitter news feeds.
-**Note** that this HOC does not currently work with a horizontally-scrolling `Grid` as horizontal scrolls reset the internal `scrollTop`.
-This may change with a future release but for the time being this HOC is should be used with `Table` or `List` only.
+**Note** that this component does not currently work with a horizontally-scrolling `Grid` as horizontal scrolls reset the internal `scrollTop`.
+This may change with a future release but for the time being this component is should be used with `Table` or `List` only.
### Prop Types
| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
-| children | Function | ✓ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number, isScrolling: boolean, scrollTop: number, onChildScroll: function }) => PropTypes.element` |
+| children | Function | ✓ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number, isScrolling: boolean, scrollTop: number, registerChild: function, onChildScroll: function }) => PropTypes.element` |
| onResize | Function | | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`. |
| onScroll | Function | | Callback to be invoked on-scroll; it is passed the following named parameters: `({ scrollTop: number, scrollLeft: number })`. |
| scrollElement | any | | Element to attach scroll event listeners. Defaults to `window`. |
@@ -53,3 +53,37 @@ ReactDOM.render(
document.getElementById('example')
);
```
+
+or using `registerChild` you can specify grid container deeper in layout (by default `WindowScroller` uses `ReactDOM.findDOMNode` function)
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { List, WindowScroller } from 'react-virtualized';
+import 'react-virtualized/styles.css'; // only needs to be imported once
+
+ReactDOM.render(
+
+ {({ height, isScrolling, registerChild, scrollTop }) => (
+
+ )}
+ ,
+ document.getElementById('example')
+);
+```
diff --git a/source/WindowScroller/WindowScroller.example.js b/source/WindowScroller/WindowScroller.example.js
index 4374c12a9..278f729c8 100644
--- a/source/WindowScroller/WindowScroller.example.js
+++ b/source/WindowScroller/WindowScroller.example.js
@@ -86,11 +86,11 @@ export default class WindowScrollerExample extends PureComponent<{}, State> {
- {({height, isScrolling, childRef, onChildScroll, scrollTop}) => (
+ {({height, isScrolling, registerChild, onChildScroll, scrollTop}) => (
{({width}) => (
-
+
{
window.listEl = el;
diff --git a/source/WindowScroller/WindowScroller.jest.js b/source/WindowScroller/WindowScroller.jest.js
index adb7a815d..0c2b3fab4 100644
--- a/source/WindowScroller/WindowScroller.jest.js
+++ b/source/WindowScroller/WindowScroller.jest.js
@@ -82,7 +82,7 @@ describe('WindowScroller', () => {
expect(component._positionFromLeft).toEqual(left);
});
- it('should allow passing child element with childRef of children function param', () => {
+ it('should allow passing child element with registerChild of children function param', () => {
const scrollElement = document.createElement('div');
scrollElement.scrollTop = 100;
scrollElement.scrollLeft = 150;
@@ -97,7 +97,7 @@ describe('WindowScroller', () => {
});
const renderFn = jest.fn();
const component = render(getMarkup({scrollElement, renderFn}));
- renderFn.mock.calls[0][0].childRef(child);
+ renderFn.mock.calls[0][0].registerChild(child);
expect(component._positionFromTop).toEqual(300 + 100 - 200);
expect(component._positionFromLeft).toEqual(350 + 150 - 250);
});
diff --git a/source/WindowScroller/WindowScroller.js b/source/WindowScroller/WindowScroller.js
index 4f8a742f9..e9d7e6b1a 100644
--- a/source/WindowScroller/WindowScroller.js
+++ b/source/WindowScroller/WindowScroller.js
@@ -20,9 +20,9 @@ type Props = {
* This function should implement the following signature:
* ({ height, isScrolling, scrollLeft, scrollTop, width }) => PropTypes.element
*/
- children: (params: {
+ children: ({
onChildScroll: ({scrollTop: number}) => void,
- childRef: (?Element) => void,
+ registerChild: (?Element) => void,
height: number,
isScrolling: boolean,
scrollLeft: number,
@@ -31,10 +31,10 @@ type Props = {
}) => React.Node,
/** Callback to be invoked on-resize: ({ height, width }) */
- onResize: (params: {height: number, width: number}) => void,
+ onResize: ({height: number, width: number}) => void,
/** Callback to be invoked on-scroll: ({ scrollLeft, scrollTop }) */
- onScroll: (params: {scrollLeft: number, scrollTop: number}) => void,
+ onScroll: ({scrollLeft: number, scrollTop: number}) => void,
/** Element to attach scroll event listeners. Defaults to window. */
scrollElement: ?Element,
@@ -173,7 +173,7 @@ export default class WindowScroller extends React.PureComponent {
return children({
onChildScroll: this._onChildScroll,
- childRef: this._childRef,
+ registerChild: this._registerChild,
height,
isScrolling,
scrollLeft,
@@ -182,7 +182,7 @@ export default class WindowScroller extends React.PureComponent {
});
}
- _childRef = element => {
+ _registerChild = element => {
this._child = element;
this.updatePosition();
};