Add onLoad to the available props.

README.md

@@ -40,6 +40,7 @@ usage in code
 | style | optional     |    Object |
 |imageClass | optional | string
 |containerClass | optional | string
+|onLoad | optional | function
 
 The above props are applied to the img tag.
 

lib/ImageWorker.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 const webWorkerScript = `
   self.addEventListener('message', event => {
@@ -15,35 +15,35 @@ const webWorkerScript = `
   })
 `;
 
-
 type ImageWorkerProps = {
   src: string,
   placeholder?: string | Function,
   style?: Object,
   imageClass?: string,
-  containerClass?: string,
-}
+  containerClass?: string
+};
 
 type ImageWorkerState = {
   isLoading: boolean,
   imgSrc: string
-}
-
+};
 
 const wrappedComponent = WrappedComponent => props => {
   return <WrappedComponent {...props} />;
 };
 
 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: ''
-  }
+    imgSrc: ""
+  };
   constructor(props: ImageWorkerProps) {
     super(props);
     this.worker.onmessage = (event: Object) => {
@@ -65,11 +65,11 @@ class ImageWorker extends Component<ImageWorkerProps, ImageWorkerState> {
 
   renderPlaceholder() {
     const { placeholder, style } = this.props;
-    if (typeof placeholder === 'function') {
+    if (typeof placeholder === "function") {
       const PlaceholderComponent = wrappedComponent(placeholder);
       return <PlaceholderComponent />;
-    } else if (typeof placeholder === 'string') {
-      return <img src={placeholder} style={{ ...style }} alt='placeholder' />;
+    } else if (typeof placeholder === "string") {
+      return <img src={placeholder} style={{ ...style }} alt="placeholder" />;
     } else {
       return null;
     }
@@ -78,27 +78,38 @@ class ImageWorker extends Component<ImageWorkerProps, ImageWorkerState> {
   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;
+    const { style, imageClass, containerClass, onLoad } = this.props;
     return (
       <div className={containerClass}>
-        {
-          this.state.isLoading ? this.renderPlaceholder() :
-            <img src={this.state.imgSrc}
-              style={{ ...style }} className={imageClass} alt='worker' />
-        }
+        {this.state.isLoading ? (
+          this.renderPlaceholder()
+        ) : (
+          <img
+            src={this.state.imgSrc}
+            style={{ ...style }}
+            className={imageClass}
+            onLoad={onLoad}
+            alt="worker"
+          />
+        )}
       </div>
     );
   }

yarn.lock

@@ -1855,7 +1855,7 @@ lodash@^4.15.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -2151,24 +2151,6 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
-react@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
 readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"