Automatically set srcSet attributes

This adds a new option called `srcSet` which defaults to true. When enabled, the 2x and 3x srcSet attributes will be added to rendered component. Currently, the attribute will only be added if the rendered component is an `img`.
imgix · Nov 17, 2015 · f37150e · f37150e
1 parent 214de97
commit f37150e
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/src/index.js b/src/index.js
@@ -35,7 +35,8 @@ export default class ReactImgix extends Component {
     fluid: PropTypes.bool,
     children: PropTypes.any,
     customParams: PropTypes.object,
-    entropy: PropTypes.bool
+    entropy: PropTypes.bool,
+    srcSet: PropTypes.bool,
   }
   static defaultProps = {
     precision: 100,
@@ -45,7 +46,8 @@ export default class ReactImgix extends Component {
     faces: true,
     fit: 'crop',
     entropy: false,
-    auto: ['format']
+    auto: ['format'],
+    srcSet: true,
   }
   state = {
     width: null,
@@ -64,6 +66,7 @@ export default class ReactImgix extends Component {
 
   render () {
     let src = ''
+    let srcSet = ''
     let component = this.props.component
 
     let width = this._findSizeForDimension('width')
@@ -78,14 +81,19 @@ export default class ReactImgix extends Component {
     if (this.props.fit) fit = this.props.fit
 
     if (this.state.mounted || this.props.aggresiveLoad) {
-      src = processImage(this.props.src, {
+      const srcOptions = {
         auto: this.props.auto,
         ...this.props.customParams,
         crop,
         fit,
         width,
         height
-      })
+      }
+
+      src = processImage(this.props.src, srcOptions)
+      const dpr2 = processImage(this.props.src, {...srcOptions, dpr: 2})
+      const dpr3 = processImage(this.props.src, {...srcOptions, dpr: 3})
+      srcSet = `${dpr2} 2x, ${dpr3} 3x`
     }
 
     let childProps = {...this.props}
@@ -100,10 +108,16 @@ export default class ReactImgix extends Component {
         backgroundSize: 'cover'
       }
       delete childProps.src
+      delete childProps.srcSet
     } else {
       if (!this.props.component) {
         component = 'img'
       }
+
+      if (component === 'img' && this.props.srcSet) {
+        childProps.srcSet = srcSet
+      }
+
       childProps.src = src
     }
     return React.createElement(component,