Merge pull request #24 from brybrophy/feature/support-srcset

Feature/support srcset

Author: boygirl

README.md

@@ -22,10 +22,12 @@ If you use the UMD build you can find the library on `window.ReactProgressiveIma
 
 ## Usage
 
-`react-progressive-image` exports a single React component, `ProgressiveImage`, which takes a `src` and `placeholder` prop, as well as an optional `onError` function.
+`react-progressive-image` exports a single React component, `ProgressiveImage`, which takes a `src` and `placeholder` prop, as well as optional props `srcSetData`, and `onError` function.
 
 `src` should be the final image you want to load, and `placeholder` is the image you want to display until `src` is loaded. `placeholder` can be anything you want. A typical use case might involve using a smaller version of the image, an inlined version (data URI), or a loading graphic.
 
+If you would like to supply a srcSet for the image, you can use the `srcSetData` prop. The prop should be and object containing two properties, `srcSet`, and `sizes`.
+
 `ProgressiveImage` accepts a render callback as a child, which will be called with the `placeholder` first, and then `src` once the image has been loaded.
 
 ```jsx
@@ -42,4 +44,26 @@ It will also call the render callback with a second argument, `loading`, which y
     <img style={{ opacity: loading ? 0.5 : 1 }} src={src} alt='an image'/>
   )}
 </ProgressiveImage>
+```
+
+If the `srcSetData` prop is supplied, it will be returned as the third argument to the render callback. This is helpful if you are sharing a render function between multiple different `ProgressiveImage` components.
+
+```jsx
+<ProgressiveImage 
+  src='medium.jpg' 
+  srcSetData={{
+    srcSet: 'small.jpg 320w, medium.jpg 700w, large.jpg 2000w',
+    sizes: "(max-width: 2000px) 100vw, 2000px"
+  }}
+  placeholder='tiny-image.jpg'
+>
+  {(src, _loading, srcSetData) => (
+    <img 
+      src={src} 
+      srcSet={srcSetData.srcSet} 
+      sizes={srcSetData.sizes} 
+      alt='an image'
+    />
+  )}
+</ProgressiveImage>
 ```

__tests__/index.js

@@ -8,14 +8,22 @@ configure({ adapter: new Adapter() });
 
 const src = "https://image.xyz/source";
 const placeholder = "https://image.xyz/placeholder";
+const srcSetData = {
+  srcSet: "srcSet",
+  sizes: "sizes"
+};
 
 const mountProgressiveImage = renderFn => {
   const defaultRender = image => {
     return <img src={image} />;
   };
   const render = renderFn || defaultRender;
   return mount(
-    <ProgressiveImage src={src} placeholder={placeholder}>
+    <ProgressiveImage
+      src={src}
+      placeholder={placeholder}
+      srcSetData={srcSetData}
+    >
       {render}
     </ProgressiveImage>
   );
@@ -25,11 +33,9 @@ describe("react-progressive-image", () => {
   beforeEach(() => {
     global.Image = Image;
   });
-
   it("exports a React component", () => {
     expect(typeof ProgressiveImage).toBe("function");
   });
-
   it("throws if not provided a function as a child", () => {
     /* eslint-disable no-console */
     const _error = console.error;
@@ -47,31 +53,36 @@ describe("react-progressive-image", () => {
     }
     /* eslint-enable no-console */
   });
-
   it("creates an instance of Image when mounted", () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.constructor).toBe(HTMLImageElement);
   });
-
   it("sets the onload property on the Image instance", () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.onload).toEqual(instance.onLoad);
   });
-
   it("sets the onerror property on the Image instance", () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.onerror).toEqual(instance.onError);
   });
-
   it("sets the src property on the Image instance", () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.src).toEqual(src);
   });
-
+  it("sets the srcSet property on the Image instance", () => {
+    const wrapper = mountProgressiveImage();
+    const instance = wrapper.instance();
+    expect(instance.image.srcset).toEqual(srcSetData.srcSet);
+  });
+  it("sets the sizes property on the Image instance", () => {
+    const wrapper = mountProgressiveImage();
+    const instance = wrapper.instance();
+    expect(instance.image.sizes).toEqual(srcSetData.sizes);
+  });
   it("renders placeholder image on initial render", () => {
     const render = jest.fn(src => <img src={src} alt="an image" />);
     const wrapper = mountProgressiveImage(render);
@@ -84,7 +95,6 @@ describe("react-progressive-image", () => {
     wrapper.instance().onLoad();
     expect(render.mock.calls[1][0]).toEqual(src);
   });
-
   it("sets loading to false after src image is loaded", () => {
     const render = jest.fn(src => <img src={src} alt="an image" />);
     const wrapper = mountProgressiveImage(render);

demo/app.js

@@ -2,20 +2,73 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ProgressiveImage from '../src/index.js';
 import inline from './inline';
-const src = 'http://i.imgur.com/XhGsjTN.jpg';
+const SM = 'https://farm2.staticflickr.com/1853/42944460370_e749cd18eb_b.jpg';
+const MD = 'https://farm2.staticflickr.com/1867/30884025408_7e6907d2e4_b.jpg';
+const LG = 'https://farm2.staticflickr.com/1875/42944459590_170ddf9fc8_b.jpg';
+
+const centerAlign = {
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+};
+
+const containerStyle = {
+  ...centerAlign,
+  overflow: 'hidden',
+  position: 'relative'
+};
 
 const imageStyle = {
-  width: 800,
-  margin: '0 auto'
+  minHeight: '100vh',
+  minWidth: '100vw'
+};
+
+const textContainerStyle = {
+  ...centerAlign,
+  bottom: 0,
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0
+}
+
+const textStyle = {
+  color: '#fff',
+  fontFamily: 'sans-serif',
+  fontSize: '2.5em',
+  textTransform: 'uppercase',
 };
 
 class App extends React.Component {
   render() {
     return (
-      <div>
-        <h1>Progressive!</h1>
-        <ProgressiveImage src={src} placeholder={inline}>
-          {image => <img style={imageStyle} src={image} />}
+      <div style={containerStyle}>
+        <div style={textContainerStyle}>
+          <h1 style={textStyle}>
+            React <br />
+            Progressive <br />
+            Image
+          </h1>
+        </div>
+        <ProgressiveImage 
+          src={MD} 
+          placeholder={inline} 
+          srcSetData={{
+            srcSet: `${SM} 320w, ${MD} 700w, ${LG} 2000w`,
+            sizes: "(max-width: 2000px) 100vw, 2000px"
+          }}
+        >
+          {(image, loading, srcSetData) => {
+            return (
+              <img 
+                style={imageStyle} 
+                src={image} 
+                srcSet={srcSetData.srcSet} 
+                sizes={srcSetData.sizes}
+              />
+            );
+          }}
         </ProgressiveImage>
       </div>
     );

demo/index.html

@@ -10,7 +10,7 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>
-<body>
+<body style="margin: 0">
   <!--[if lt IE 8]>
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
   <![endif]-->

demo/inline.js

@@ -2,16 +2,23 @@
 
 import * as React from "react";
 
+type SrcSetData = {
+  srcSet: string,
+  sizes: string
+};
+
 type Props = {
-  children: (string, boolean) => React.Node,
+  children: (string, boolean, SrcSetData) => React.Node,
   onError?: (errorEvent: Event) => void,
   placeholder: string,
-  src: string
+  src: string,
+  srcSetData?: SrcSetData
 };
 
 type State = {
   image: string,
-  loading: boolean
+  loading: boolean,
+  srcSetData: SrcSetData
 };
 
 export default class ProgressiveImage extends React.Component<Props, State> {
@@ -20,21 +27,22 @@ export default class ProgressiveImage extends React.Component<Props, State> {
     super(props);
     this.state = {
       image: props.placeholder,
-      loading: true
+      loading: true,
+      srcSetData: { srcSet: "", sizes: "" }
     };
   }
 
   componentDidMount() {
-    const { src } = this.props;
-    this.loadImage(src);
+    const { src, srcSetData } = this.props;
+    this.loadImage(src, srcSetData);
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { src, placeholder } = this.props;
+    const { src, placeholder, srcSetData } = this.props;
     // We only invalidate the current image if the src has changed.
     if (src !== prevProps.src) {
       this.setState({ image: placeholder, loading: true }, () => {
-        this.loadImage(src);
+        this.loadImage(src, srcSetData);
       });
     }
   }
@@ -46,7 +54,7 @@ export default class ProgressiveImage extends React.Component<Props, State> {
     }
   }
 
-  loadImage = (src: string) => {
+  loadImage = (src: string, srcSetData?: SrcSetData) => {
     // If there is already an image we nullify the onload
     // and onerror props so it does not incorrectly set state
     // when it resolves
@@ -59,6 +67,10 @@ export default class ProgressiveImage extends React.Component<Props, State> {
     image.onload = this.onLoad;
     image.onerror = this.onError;
     image.src = src;
+    if (srcSetData) {
+      image.srcset = srcSetData.srcSet;
+      image.sizes = srcSetData.sizes;
+    }
   };
 
   onLoad = () => {
@@ -68,7 +80,11 @@ export default class ProgressiveImage extends React.Component<Props, State> {
     // this.props.
     this.setState({
       image: this.image.src,
-      loading: false
+      loading: false,
+      srcSetData: {
+        srcSet: this.image.srcset || "",
+        sizes: this.image.sizes || ""
+      }
     });
   };
 
@@ -80,13 +96,13 @@ export default class ProgressiveImage extends React.Component<Props, State> {
   };
 
   render() {
-    const { image, loading } = this.state;
+    const { image, loading, srcSetData } = this.state;
     const { children } = this.props;
 
     if (!children || typeof children !== "function") {
       throw new Error(`ProgressiveImage requires a function as its only child`);
     }
 
-    return children(image, loading);
+    return children(image, loading, srcSetData);
   }
 }