Merge pull request #315 from ameerthehacker/fix/finddomnode-compatability

Author: ameerthehacker

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 coverage/
 .DS_Store
+.idea

README.md

@@ -25,6 +25,13 @@ Lazyload your Components, Images or anything matters the performance.
 ## Installation
 
 > 2.0.0 is finally out, read [Upgrade Guide](https://github.com/twobin/react-lazyload/wiki/Upgrade-Guide), it's almost painless to upgrade!
+> 3.0.0 fixes the findDomNode warning through usage of React ref, and the following are the changes you need to be aware of
+
+* Now we have an extra div wrapping the lazy loaded component for the React ref to work 
+* We can understand that it is an extra DOM node, and we are working to optimize that if possible
+* It might break your UI or snapshot tests based on your usage
+* To customize the styling to the extra div please refer [here](#classNamePrefix)
+* Found any other problem, please feel free to leave a comment over [here](https://github.com/twobin/react-lazyload/issues/310)
 
 ```
 $ npm install --save react-lazyload

lib/index.js

@@ -358,7 +358,7 @@ var LazyLoad = function (_Component) {
 
 
       return _react2.default.createElement(
-        'span',
+        'div',
         { className: classNamePrefix + '-wrapper', ref: this.setRef },
         this.visible ? children : placeholder ? placeholder : _react2.default.createElement('div', {
           style: { height: height },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lazyload",
-  "version": "2.6.8",
+  "version": "3.0.0",
   "description": "Lazyload your components, images or anything where performance matters.",
   "main": "lib/index.js",
   "scripts": {

src/index.jsx

@@ -337,7 +337,7 @@ class LazyLoad extends Component {
     } = this.props;
 
     return (
-      <span className={`${classNamePrefix}-wrapper`} ref={this.setRef}>
+      <div className={`${classNamePrefix}-wrapper`} ref={this.setRef}>
         {this.visible ? (
           children
         ) : placeholder ? (
@@ -348,7 +348,7 @@ class LazyLoad extends Component {
             className={`${classNamePrefix}-placeholder`}
           />
         )}
-      </span>
+      </div>
     );
   }
 }