Merge pull request #329 from ianhu92/master

Author: ameerthehacker

README.md

@@ -200,6 +200,12 @@ The `classNamePrefix` prop allows the user to supply their own custom class pref
 
 These being:
     # A wrapper div, which is present at all times (default )
+    
+### style
+
+Type: Object Default: undefined
+
+Similar to [classNamePrefix](#classNamePrefix), the `style` prop allows users to pass custom CSS styles to wrapper div. 
 
 ### wheel
 

src/index.jsx

@@ -333,11 +333,12 @@ class LazyLoad extends Component {
       height,
       children,
       placeholder,
-      classNamePrefix
+      classNamePrefix,
+      style
     } = this.props;
 
     return (
-      <div className={`${classNamePrefix}-wrapper`} ref={this.setRef}>
+      <div className={`${classNamePrefix}-wrapper`} ref={this.setRef} style={style}>
         {this.visible ? (
           children
         ) : placeholder ? (
@@ -369,7 +370,8 @@ LazyLoad.propTypes = {
   debounce: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
   placeholder: PropTypes.node,
   scrollContainer: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  unmountIfInvisible: PropTypes.bool
+  unmountIfInvisible: PropTypes.bool,
+  style: PropTypes.object
 };
 
 LazyLoad.defaultProps = {

test/specs/lazyload.spec.js

@@ -47,7 +47,7 @@ describe('LazyLoad', () => {
       expect(document.querySelector('.lazyload-placeholder')).to.exist;
       expect(document.querySelector('.treasure')).to.not.exist;
     });
- 
+
     it('should NOT update when invisble', (done) => {
       ReactDOM.render(
         <div>
@@ -145,6 +145,16 @@ describe('LazyLoad', () => {
       expect(document.querySelector('.custom-lazyload-wrapper')).to.exist;
       expect(document.querySelector('.custom-lazyload-placeholder')).to.exist;
     });
+    it('should render wrapper with `style` when provided', () => {
+      ReactDOM.render(
+        <div>
+          <LazyLoad height={9999} classNamePrefix="custom-lazyload" style={{height: 200}}>
+            <span>123</span>
+          </LazyLoad>
+        </div>, div);
+      console.log(div.innerHTML);
+      expect(document.querySelector('.custom-lazyload-wrapper').getBoundingClientRect().height).to.equal(200);
+    })
  });
 
   describe('Checking visibility', () => {