let user pass extra attributes

.npmrc

@@ -0,0 +1 @@
+package-lock=false

README.md

@@ -15,7 +15,7 @@ yarn add react-worker-image
 
 ## Usage
 
-`react-worker-image` exports one react component which takes `src` as a prop, and an optional prop of `placeholder`, `style` and `imageClass` which are applied to the img tag.
+`react-worker-image` exports one react component which takes `src` as a prop, and an optional prop of `placeholder`.
 
 ```js
 const ImageWorker = require('react-worker-image').default;
@@ -37,11 +37,8 @@ usage in code
 | ------------- |:-------------:| --------------:|
 | src      | yes |  string |
 | placeholder      | optional      |   string or Component|
-| style | optional     |    Object |
-|imageClass | optional | string
-|containerClass | optional | string
 
-The above props are applied to the img tag.
+Any other attribute that is passed to the component will be applied to the img tag.
 
 Found a bug file them [here](https://github.com/nitish24p/react-worker-image/issues).
 

lib/ImageWorker.js

@@ -15,37 +15,33 @@ const webWorkerScript = `
   })
 `;
 
-
 type ImageWorkerProps = {
-  src: string,
   placeholder?: string | Function,
-  style?: Object,
-  imageClass?: string,
-  containerClass?: string,
-}
+  src: string
+};
 
 type ImageWorkerState = {
-  isLoading: boolean,
-  imgSrc: string
-}
-
-
-const wrappedComponent = WrappedComponent => props => {
-  return <WrappedComponent {...props} />;
+  imgSrc: string,
+  isLoading: boolean
 };
 
 class ImageWorker extends Component<ImageWorkerProps, ImageWorkerState> {
   image: HTMLImageElement;
-  worker = new Worker(URL.createObjectURL(
-    new Blob([webWorkerScript], { type: 'application/javascript' })
-  ))
+
+  worker = new Worker(
+    URL.createObjectURL(
+      new Blob([webWorkerScript], { type: 'application/javascript' })
+    )
+  );
 
   state = {
     isLoading: true,
     imgSrc: ''
-  }
+  };
+
   constructor(props: ImageWorkerProps) {
     super(props);
+
     this.worker.onmessage = (event: Object) => {
       this.loadImage(event.data);
     };
@@ -60,46 +56,51 @@ class ImageWorker extends Component<ImageWorkerProps, ImageWorkerState> {
       this.image.onload = null;
       this.image.onerror = null;
     }
+
     this.worker.terminate();
   }
 
   renderPlaceholder() {
-    const { placeholder, style } = this.props;
+    const { placeholder, src, ...attributes } = this.props; // eslint-disable-line no-unused-vars
+
     if (typeof placeholder === 'function') {
-      const PlaceholderComponent = wrappedComponent(placeholder);
+      const PlaceholderComponent = placeholder;
+
       return <PlaceholderComponent />;
     } else if (typeof placeholder === 'string') {
-      return <img src={placeholder} style={{ ...style }} alt='placeholder' />;
-    } else {
-      return null;
+      return <img {...attributes} src={placeholder} />;
     }
+
+    return null;
   }
 
   loadImage = (url: string) => {
     const image = new Image();
     this.image = image;
-    
+
     image.src = url;
-    image.decode !== undefined ? image.decode().then(this.onLoad).catch(this.onLoad) : image.onload = this.onLoad;
-  }
+    image.decode !== undefined
+      ? image
+        .decode()
+        .then(this.onLoad)
+        .catch(this.onLoad)
+      : (image.onload = this.onLoad);
+  };
 
   onLoad = () => {
     this.setState({
       imgSrc: this.image.src,
       isLoading: false
     });
-  }
+  };
 
   render() {
-    const { style, imageClass, containerClass } = this.props;
-    return (
-      <div className={containerClass}>
-        {
-          this.state.isLoading ? this.renderPlaceholder() :
-            <img src={this.state.imgSrc}
-              style={{ ...style }} className={imageClass} alt='worker' />
-        }
-      </div>
+    const { placeholder, src, ...attributes } = this.props; // eslint-disable-line no-unused-vars
+
+    return this.state.isLoading ? (
+      this.renderPlaceholder()
+    ) : (
+      <img {...attributes} src={this.state.imgSrc} />
     );
   }
 }