Merge pull request #311 from rmunson/bug/lazyload-wrapper-class-conflicts

Author: ameerthehacker

README.md

@@ -181,6 +181,19 @@ If you provide a number, that will be how many `ms` to wait; if you provide `tru
 
 [demo](https://twobin.github.io/react-lazyload/examples/#/debounce)
 
+### classNamePrefix
+
+Type: String Default: `lazyload`
+
+While rendering, Lazyload will add some elements to the component tree in addition to the wrapped component children.
+
+The `classNamePrefix` prop allows the user to supply their own custom class prefix to help:
+    # Avoid class conflicts on an implementing app
+    # Allow easier custom styling
+
+These being:
+    # A wrapper div, which is present at all times (default )
+
 ### wheel
 
 **DEPRECATED NOTICE**

lib/index.js

@@ -350,12 +350,19 @@ var LazyLoad = function (_Component) {
   }, {
     key: 'render',
     value: function render() {
+      var _props2 = this.props,
+          height = _props2.height,
+          children = _props2.children,
+          placeholder = _props2.placeholder,
+          classNamePrefix = _props2.classNamePrefix;
+
+
       return _react2.default.createElement(
         'span',
-        { className: 'lazyload-wrapper', ref: this.setRef },
-        this.visible ? this.props.children : this.props.placeholder ? this.props.placeholder : _react2.default.createElement('div', {
-          style: { height: this.props.height },
-          className: 'lazyload-placeholder'
+        { className: classNamePrefix + '-wrapper', ref: this.setRef },
+        this.visible ? children : placeholder ? placeholder : _react2.default.createElement('div', {
+          style: { height: height },
+          className: classNamePrefix + '-placeholder'
         })
       );
     }
@@ -365,6 +372,7 @@ var LazyLoad = function (_Component) {
 }(_react.Component);
 
 LazyLoad.propTypes = {
+  classNamePrefix: _propTypes2.default.string,
   once: _propTypes2.default.bool,
   height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
   offset: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number)]),
@@ -380,6 +388,7 @@ LazyLoad.propTypes = {
 };
 
 LazyLoad.defaultProps = {
+  classNamePrefix: 'lazyload',
   once: false,
   offset: 0,
   overflow: false,

src/index.jsx

@@ -329,16 +329,23 @@ class LazyLoad extends Component {
   }
 
   render() {
+    const {
+      height,
+      children,
+      placeholder,
+      classNamePrefix
+    } = this.props;
+
     return (
-      <span className="lazyload-wrapper" ref={this.setRef}>
+      <span className={`${classNamePrefix}-wrapper`} ref={this.setRef}>
         {this.visible ? (
-          this.props.children
-        ) : this.props.placeholder ? (
-          this.props.placeholder
+          children
+        ) : placeholder ? (
+          placeholder
         ) : (
           <div
-            style={{ height: this.props.height }}
-            className="lazyload-placeholder"
+            style={{ height: height }}
+            className={`${classNamePrefix}-placeholder`}
           />
         )}
       </span>
@@ -347,6 +354,7 @@ class LazyLoad extends Component {
 }
 
 LazyLoad.propTypes = {
+  classNamePrefix: PropTypes.string,
   once: PropTypes.bool,
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   offset: PropTypes.oneOfType([
@@ -365,6 +373,7 @@ LazyLoad.propTypes = {
 };
 
 LazyLoad.defaultProps = {
+  classNamePrefix: 'lazyload',
   once: false,
   offset: 0,
   overflow: false,

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>
@@ -131,7 +131,21 @@ describe('LazyLoad', () => {
 
       expect(document.querySelector('.my-placeholder')).to.exist;
     });
-  });
+    it('should render `placeholder` and `wrapper` elements with custom `classNamePrefix` when provided', () => {
+      ReactDOM.render(
+        <div>
+          <LazyLoad height={9999} classNamePrefix="custom-lazyload">
+            <span className="something">123</span>
+          </LazyLoad>
+          <LazyLoad height={9999} classNamePrefix="custom-lazyload">
+            <span className="invisible">123</span>
+          </LazyLoad>
+        </div>, div);
+      console.log(div.innerHTML);
+      expect(document.querySelector('.custom-lazyload-wrapper')).to.exist;
+      expect(document.querySelector('.custom-lazyload-placeholder')).to.exist;
+    });
+ });
 
   describe('Checking visibility', () => {
     it('should consider visible when top edge is visible', () => {