Merge pull request #23 from benox3/inview

Render only images that are in view

Author: benox3

README.md

@@ -1,7 +1,5 @@
 # react-pic
 
-[![NPM](https://nodei.co/npm/react-pic.png)](https://nodei.co/npm/react-pic/)
-
 [![NPM version](https://img.shields.io/npm/v/react-pic.svg)](https://www.npmjs.com/package/react-pic)
 [![Build Status](https://travis-ci.org/benox3/react-pic.svg?branch=master)](https://travis-ci.org/benox3/react-pic)
 [![Coverage Status](https://coveralls.io/repos/github/benox3/react-pic/badge.svg?branch=master)](https://coveralls.io/github/benox3/react-pic?branch=master)
@@ -50,13 +48,17 @@ export default class Example extends Component {
 
 ## Props
 
-| name         | required | type   | description                                                                                                                |
-|--------------|----------|--------|----------------------------------------------------------------------------------------------------------------------------|
-| images       | true     | Array  | The collection of images you would like to use as a source.                                                                |
-| alt       | false     | string  | Text equivalent of the image. https://www.w3.org/QA/Tips/altAttribute                                                                |
-| defaultIndex | false    | Number | The image object to use on initial render. **Default is 0**                                                                                 |
-| noscriptIndex | false    | Number | The image object to use on noscript render. **Default is last image in images**                                                                                 |
-| style        | false    | Object | Override the style object. **This will remove the default style:** `{ margin: '0 auto', maxWidth: '100%', width: '100%' }` |
+| name         | default | required | type   | description                                                                                                                |
+|--------------|----------|--------|----------|-----------------------------------------------------------------------------------------------------------------|
+| images       | | true     | array  | The collection of images you would like to use as a source.                                                                |
+| alt       | | false     | string  | Text equivalent of the image. https://www.w3.org/QA/Tips/altAttribute                                                                |
+| defaultIndex |  0 | false    | number | The image object to use on initial render.                                                                                 |
+| noscriptIndex | `images.length-1` | false    | number | The image object to use on noscript render.                                                                                 |
+| baseStyle        | `{ position: 'relative', margin: '-5px', overflow: 'hidden' }` | false    | object | Override the container style object. |
+| imgStyle        | `{ margin: '0 auto', maxWidth: '100%', width: '100%' }` | false    | object | Override the image style object. |
+| shouldBlur        | true | false    | boolean | Determines if the image should be blurred before setting the optimal image. |
+| blurAmmount        | '10px' | false    | string | The ammount of blur. Expected format: '10px' or '15%'. |
+| renderOutOfView        | false | false    | boolean | Determines if the optimal image should be selected even if not in view |
 
 ## Special Thanks
 

lib/ImageClient.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import Image from '../common/Image';
+import shallowCompare from 'react-addons-shallow-compare';
+
+export default class ImageClient extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
+  render() {
+    return (
+      <Image {...this.props} />
+    );
+  }
+}

lib/ImageServer.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+export default class Image extends Component {
+  getStyle() {
+    const { imgStyle, isBlurred, blurAmmount } = this.props;
+
+    if (isBlurred) {
+      return {
+        ...imgStyle,
+        filter: `blur(${blurAmmount})`
+      };
+    }
+
+    return imgStyle;
+  }
+
+  render() {
+    const { alt, image } = this.props;
+    return (
+      <img
+        alt={alt}
+        style={this.getStyle()}
+        src={image.url} />
+    );
+  }
+}

lib/client/index.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import getResponsiveImage from './utils/getResponsiveImage';
 import debounce from './utils/debounce';
-import Image from './ImageServer';
+import isElementInView from './utils/isElementInView';
+import ImageBase from './server/';
 
 /**
  * Pic Component
@@ -14,23 +15,39 @@ export default class Pic extends Component {
       noScriptImage: props.noscriptIndex ?
         props.images[props.noScriptIndex] :
         props.images[props.images.length-1],
-      isMounted: false
+      isBlurred: props.shouldBlur
     };
 
     this.setResponsiveImage = this.setResponsiveImage.bind(this);
   }
 
   componentDidMount() {
-    this.setResponsiveImage();
+    // set optimal image if in view or if elected to render out of view on mount
+    this.props.renderOutOfView ? this.setResponsiveImage(): this.inViewHandler();
 
-    this.setState({
-      isMounted: true
-    });
+    // set responsive image on scroll
+    window.addEventListener('scroll', debounce(() => {
+      this.inViewHandler();
+    }, 150));
 
     // set responsive image on resize
     window.addEventListener('resize', debounce(this.setResponsiveImage, 150));
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('scroll', debounce(() => {
+      this.inViewHandler();
+    }, 150));
+
+    window.removeEventListener('resize', debounce(this.setResponsiveImage, 150));
+  }
+
+  inViewHandler() {
+    if (isElementInView(this.refs.base)) {
+      this.setResponsiveImage();
+    }
+  }
+
   /**
    * Set the optimal image src
    */
@@ -45,7 +62,8 @@ export default class Pic extends Component {
         this.state.image
       );
       this.setState({
-        image: responsiveImage
+        image: responsiveImage,
+        isBlurred: false
       });
     } catch (e) {
       // failed to update image
@@ -58,10 +76,8 @@ export default class Pic extends Component {
     }
 
     return (
-      <div ref='base' style={{
-        position: 'relative'
-      }}>
-        <Image {...this.props} {...this.state} />
+      <div ref='base' style={this.props.baseStyle}>
+        <ImageBase {...this.props} {...this.state} />
       </div>
     );
   }
@@ -71,12 +87,20 @@ export default class Pic extends Component {
 Pic.defaultProps = {
   alt: '',
   defaultIndex: 0,
-  style: {
+  shouldBlur: true,
+  blurAmmount: '10px',
+  baseStyle: {
+    position: 'relative',
+    margin: '-5px',
+    overflow: 'hidden'
+  },
+  imgStyle: {
     margin: '0 auto',
     maxWidth: '100%',
     width: '100%'
   },
-  images:[]
+  images: [],
+  renderIfOutOfView: false
 };
 
 /** Prop Types */
@@ -108,5 +132,10 @@ Pic.propTypes = {
   },
   defaultIndex: React.PropTypes.number, // The default image to render
   noscriptIndex: React.PropTypes.number, // The default image to render on noscript
-  alt: React.PropTypes.string
+  alt: React.PropTypes.string,
+  imgStyle: React.PropTypes.object,
+  baseStyle: React.PropTypes.object,
+  shouldBlur: React.PropTypes.bool,
+  blurAmmount: React.PropTypes.string,
+  renderOutOfView: React.PropTypes.bool
 };

lib/common/Image.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import NoScriptImg from './NoScriptImg';
+import Image from '../common/Image';
+import shallowCompare from 'react-addons-shallow-compare';
+
+export default class ImageServer extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
+  render() {
+    const {
+      alt,
+      style,
+      noScriptImage
+    } = this.props;
+
+    return (
+      <div>
+        <NoScriptImg
+          alt={alt}
+          image={noScriptImage}
+          style={style} />
+
+        <Image {...this.props} />
+      </div>
+    );
+  }
+}

lib/index.js

@@ -0,0 +1,15 @@
+/**
+ * Check if an element is in view.
+ * @param  {HTMLElement} el - The element to check.
+ * @return {Boolean}
+ */
+export default function isElementInView (el) {
+  const rect = el.getBoundingClientRect();
+
+  return (
+    rect.bottom > 0 &&
+    rect.right > 0 &&
+    rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
+    rect.top < (window.innerHeight || document.documentElement.clientHeight)
+  );
+}

lib/NoScriptImg.js renamed to lib/server/NoScriptImg.js

@@ -1,6 +1,6 @@
 {
   "name": "react-pic",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "React component for progressive and responsive image loading.",
   "author": "Ben Budnevich",
   "main": "dist/commonjs/react-pic.js",
@@ -41,6 +41,9 @@
   "bugs": {
     "url": "https://github.com/benox3/react-pic/issues"
   },
+  "dependencies": {
+    "react-addons-shallow-compare": "0.14.x || ^15.0.0-0 || 15.x"
+  },
   "devDependencies": {
     "babel-cli": "^6.16.0",
     "babel-core": "^6.17.0",
@@ -74,7 +77,7 @@
     "react-dom": "0.14.x || ^15.0.0-0 || 15.x"
   },
   "browser": {
-    "./lib/ImageServer.js": "./lib/ImageClient.js"
+    "./lib/server/index.js": "./lib/client/index.js"
   },
   "license": "MIT"
 }