Merge pull request #1 from tehandyb/master

Smoothed out the jitter by including full margin in height calculations

dist/LazyRender.js

@@ -1,9 +1,10 @@
 "use strict";
 
 var React = require('react/addons');
+var elementSize = require("element-size");
 var cloneWithProps = React.addons.cloneWithProps;
 
-var LazyRender = React.createClass({displayName: 'LazyRender',
+var LazyRender = React.createClass({displayName: "LazyRender",
   propTypes: {
     children: React.PropTypes.array.isRequired,
     maxHeight: React.PropTypes.number.isRequired,
@@ -55,6 +56,11 @@ var LazyRender = React.createClass({displayName: 'LazyRender',
     }
   },
 
+  getElementHeight: function(element) {
+    var marginTop = parseInt(window.getComputedStyle(element).marginTop);
+    return elementSize(element)[1] - marginTop; //remove one margin since the margins are shared by adjacent elements
+  },
+
   componentWillReceiveProps: function(nextProps) {
     var childrenTop = Math.floor(this.state.scrollTop / this.state.childHeight);
     var childrenBottom = (nextProps.children.length - childrenTop -
@@ -87,8 +93,7 @@ var LazyRender = React.createClass({displayName: 'LazyRender',
   componentDidMount: function() {
     var firstChild = this.refs['child-0'];
     var el = firstChild.getDOMNode();
-    var childHeight = (el.style.height ? el.style.height.replace('px', '') :
-                       null) || el.clientHeight;
+    var childHeight = this.getElementHeight(el);
 
     var height = this.getHeight(
       this.props.children.length,

example/css/index.scss

@@ -48,3 +48,10 @@ p.info {
         margin-right: 10px;
     }
 }
+
+.list-item {
+  height: 20px;
+  padding: 5px 10px;
+  background-color: #E3F3FB;
+  margin: 5px 0px;
+}

example/index.jsx

@@ -87,7 +87,7 @@ var Index = React.createClass({
   render: function() {
     var rows = _.range(this.state.limit).map(function(row) {
       var index = row % 50;
-      return <div style={{ height: 20, padding: "5px 10px" }}>
+      return <div className="list-item">
         #{row + 1} {NAMES[index]}
       </div>;
     });

package.json

@@ -37,6 +37,8 @@
   },
   "license": "Apache 2.0",
   "dependencies": {
+    "element-size": "^1.1.1",
+    "lodash": "^3.9.3",
     "react": "^0.12.0"
   },
   "devDependencies": {

src/LazyRender.jsx

@@ -1,6 +1,7 @@
 "use strict";
 
 var React = require('react/addons');
+var elementSize = require("element-size");
 var cloneWithProps = React.addons.cloneWithProps;
 
 var LazyRender = React.createClass({
@@ -55,6 +56,11 @@ var LazyRender = React.createClass({
     }
   },
 
+  getElementHeight: function(element) {
+    var marginTop = parseInt(window.getComputedStyle(element).marginTop);
+    return elementSize(element)[1] - marginTop; //remove one margin since the margins are shared by adjacent elements
+  },
+
   componentWillReceiveProps: function(nextProps) {
     var childrenTop = Math.floor(this.state.scrollTop / this.state.childHeight);
     var childrenBottom = (nextProps.children.length - childrenTop -
@@ -87,8 +93,7 @@ var LazyRender = React.createClass({
   componentDidMount: function() {
     var firstChild = this.refs['child-0'];
     var el = firstChild.getDOMNode();
-    var childHeight = (el.style.height ? el.style.height.replace('px', '') :
-                       null) || el.clientHeight;
+    var childHeight = this.getElementHeight(el);
 
     var height = this.getHeight(
       this.props.children.length,