Merge pull request #6 from FormidableLabs/add-loading-key

Add new `loading` argument to render callback

Author: aweary

README.md

@@ -28,8 +28,18 @@ If you use the UMD build you can find the library on `window.ReactProgressiveIma
 
 `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.
 
-```js
+```jsx
 <ProgressiveImage src='large-image.jpg' placeholder='tiny-image.jpg'>
   {(src) => <img src={src} alt='an image'/>}
 </ProgressiveImage>
 ```
+
+It will also call the render callback with a second argument, `loading`, which you can use to quickly determine what image is being rendered. `loading` will be `true` when the placeholder is rendered, and `false` when the full image is rendered.
+
+```jsx
+<ProgressiveImage src='large-image.jpg' placeholder='tiny-image.jpg'>
+  {(src, loading) => (
+    <img style={{ opacity: loading ? 0.5 : 1 }} src={src} alt='an image'/>
+  )}
+</ProgressiveImage>
+```

__tests__/index.js

@@ -69,4 +69,13 @@ describe('react-progressive-image', () => {
     expect(render.mock.calls[1][0]).toEqual(src);
   });
 
+  it('should pass the loading state', () => {
+    const render = jest.fn(() => <h1>Hello, world</h1>);
+    mountProgressiveImage(render);
+    expect(render.mock.calls[0][0]).toEqual(placeholder);
+    expect(render.mock.calls[0][1]).toEqual(true);
+    expect(render.mock.calls[1][0]).toEqual(src);
+    expect(render.mock.calls[1][1]).toEqual(false);
+  });
+
 });

index.js

@@ -10,6 +10,7 @@ type ProgressiveImageProps = {
 
 type ProgressiveImageState = {
   image: string,
+  loading: boolean,
 };
 
 export default class ProgressiveImage extends React.Component {
@@ -19,7 +20,8 @@ export default class ProgressiveImage extends React.Component {
   constructor(props: ProgressiveImageProps) {
     super(props);
     this.state = {
-      image: props.placeholder
+      image: props.placeholder,
+      loading: true
     };
   }
 
@@ -32,7 +34,7 @@ export default class ProgressiveImage extends React.Component {
     const { src, placeholder } = nextProps;
     // We only invalidate the current image if the src has changed.
     if (src !== this.props.src) {
-      this.setState({ image: placeholder }, () => {
+      this.setState({ image: placeholder, loading: true }, () => {
         this.loadImage(src);
       });
     }
@@ -66,7 +68,8 @@ export default class ProgressiveImage extends React.Component {
     // new image loading before the new props are available as
     // this.props.
     this.setState({
-      image: this.image.src
+      image: this.image.src,
+      loading: false
     });
   }
 
@@ -78,13 +81,13 @@ export default class ProgressiveImage extends React.Component {
   }
 
   render() {
-    const { image } = this.state;
+    const { image, loading } = 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);
+    return children(image, loading);
   }
 }