feat(component): API improvements

BREAKING CHANGE: The API of the component has changed.

Author: wcandillon

README.md

@@ -15,23 +15,29 @@ $ npm install react-progressive-image-loading --save
 ## Usage
 
 ```jsx
-<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png" />
+<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png">
+{(src, style) => <img src={src} style={style} />}
+</ProgressiveImage>
 ```
 
-Instead of using the `img` tag, you can use `background=true` that will generate a `div` with `background-image` as inlined css.
+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" background={true} />
+<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png">
+{(src, style) => <div style={Object.assign(style, { backgroundImage: `url(${src})` })} />}
+</ProgressiveImage>
 ```
 
 You can also customize the transition time and the timing function used for that transition.
 
 ```jsx
-<ProgressiveImage preview="/images/tiny-preview.png"
-                  src="/images/preview.png"
-                  transitionTime={500}
-                  transitionFunction="ease"
-/>
+<ProgressiveImage
+    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:

src/index.tsx

@@ -1,49 +1,42 @@
 import * as React from "react";
 
-export type DivProps = React.HTMLProps<HTMLImageElement>;
-export type ImageProps = React.HTMLProps<HTMLDivElement>;
-
 export interface ProgressiveImageProps {
     preview: string;
     src: string;
-    background?: boolean;
-    backgroundImages?: string[];
     transitionTime?: number;
     timingFunction?: string;
-    maxBlur?: number;
+    initialBlur: number;
 }
 
 export interface ProgressiveImageState {
     src: string;
     blur: number;
 }
 
-export class ProgressiveImage extends React.Component<ProgressiveImageProps & DivProps & ImageProps, ProgressiveImageState> {
-
-    private clonedProps: React.HTMLProps<HTMLDivElement & HTMLImageElement> = {};
+export class ProgressiveImage extends React.Component<ProgressiveImageProps, ProgressiveImageState> {
 
     static defaultProps = {
         transitionTime: 500,
         timingFunction: "ease",
-        maxBlur: 10
+        initialBlur: 10
     };
 
     componentWillMount() {
-        const {src, preview, maxBlur} = this.props;
-        this.setState({ src: "", blur: maxBlur as number });
-        this.cloneProps();
+        const {src, preview} = this.props;
+        const initialBlur = this.props.initialBlur as number;
         this.fetch(preview)
-            .then(previewDataURI => this.setState({ src: previewDataURI, blur: maxBlur as number }))
+            .then(previewDataURI => this.setState({ src: previewDataURI, blur: initialBlur }))
             .then(() => this.fetch(src))
-            .then(srcDataURI => this.setState({ src: srcDataURI, blur: 0 }));
+            .then(srcDataURI => this.setState({ src: srcDataURI, blur: initialBlur }));
     }
+
     render() {
-        const {src, style, background} = this.props;
-        return background ?
-            <div style={Object.assign(this.getBackgroundStyle(), style)} {...this.clonedProps}>{this.props.children}</div>
-            :
-            <img src={src} style={Object.assign(this.getStyle(), style)} {...this.clonedProps} />
-            ;
+        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());
     }
 
     private fetch(src: string): Promise<string> {
@@ -54,12 +47,6 @@ export class ProgressiveImage extends React.Component<ProgressiveImageProps & Di
         });
     }
 
-    private cloneProps() {
-        Object.keys(this.props)
-            .filter(prop => ["style", "src", "preview", "background", "transitionTime", "timingFunction", "backgroundImages", "maxBlur", "children"].indexOf(prop) === -1)
-            .forEach(prop => this.clonedProps[prop] = this.props[prop]);
-    }
-
     private getStyle() {
         const {transitionTime, timingFunction} = this.props;
         const {blur} = this.state;
@@ -68,13 +55,4 @@ export class ProgressiveImage extends React.Component<ProgressiveImageProps & Di
             transition: `filter ${transitionTime}ms ${timingFunction}`
         };
     }
-
-    private getBackgroundStyle() {
-        const {src} = this.state;
-        const {backgroundImages} = this.props;
-        const style = {
-            backgroundImage: `${backgroundImages ? `${backgroundImages.join(",")},` : ""}url(${src})`
-        };
-        return Object.assign(style, this.getStyle());
-    }
 }