Merge pull request #21 from wcandillon/wcandillon-patch-14

feat(component): API improvements

Author: wcandillon

README.md

@@ -15,17 +15,21 @@ $ npm install react-progressive-image-loading --save
 ## Usage
 
 ```jsx
-<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png">
-{(src, style) => <img src={src} style={style} />}
-</ProgressiveImage>
+<ProgressiveImage
+    preview="/images/tiny-preview.png"
+    src="/images/preview.png"
+    render={(src, style) => <img src={src} style={style} />}
+/>
 ```
 
 Instead of using the `img` tag, you can use `background-image` with a `div`.
 
 ```jsx
-<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png">
-{(src, style) => <div style={Object.assign(style, { backgroundImage: `url(${src})` })} />}
-</ProgressiveImage>
+<ProgressiveImage
+    preview="/images/tiny-preview.png"
+    src="/images/preview.png"
+    render={(src, style) => <div style={Object.assign(style, { backgroundImage: `url(${src})` })} />}
+/>
 ```
 
 You can also customize the transition time and the timing function used for that transition.
@@ -35,16 +39,7 @@ You can also customize the transition time and the timing function used for that
     preview="/images/tiny-preview.png"
     src="/images/preview.png"
     transitionTime={500}
-    transitionFunction="ease">
-{(src, style) => <img src={src} style={style} />}
-</ProgressiveImage>
-```
-
-In case of `background=true`, it is possible to add some layers on top of the background image, for instance:
-
-```jsx
-<ProgressiveImage
-  preview="/images/tiny-preview.png" src="/images/preview.png" background={true}
-  backgroundImages={["linear-gradient(to top, rgba(31,31,31,0.3), rgba(31,31,31,0.3))"]}
+    transitionFunction="ease"
+    render={(src, style) => <img src={src} style={style} />}
 />
 ```

src/index.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 export interface ProgressiveImageProps {
     preview: string;
     src: string;
+    render: (src: string, style: {}) => JSX.Element;
     transitionTime?: number;
     timingFunction?: string;
     initialBlur?: number;
@@ -33,11 +34,8 @@ export class ProgressiveImage extends React.Component<ProgressiveImageProps, Pro
 
     render() {
         const {src} = this.state;
-        const {children} = this.props;
-        if (!children || typeof children !== "function") {
-            throw new Error("ProgressiveImage requires a function as its only child");
-        }
-        return children(src, this.getStyle());
+        const {render} = this.props;
+        return render(src, this.getStyle());
     }
 
     private fetch(src: string): Promise<string> {