diff --git a/package.json b/package.json
index affc9b3..e76b955 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,10 @@
   "homepage": "http://zpao.github.io/qrcode.react",
   "main": "lib/index.js",
   "scripts": {
-    "flow": "flow",
+    "flow": "./node_modules/.bin/flow",
     "lint": "eslint src/ examples/demo.js",
     "pretty": "prettier --write --single-quote --bracket-spacing=false --trailing-comma=es5 {.eslintrc.js,src/*.js,examples/demo.js}",
-    "prepublish": "flow && make clean && make all",
+    "prepublish": "./node_modules/.bin/flow && make clean && make all",
     "prepublish-docs": "make clean && make all",
     "publish-docs": "gh-pages --dist=examples --src='{index.html,bundle.js}'",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -45,10 +45,10 @@
     "eslint": "^3.19.0",
     "eslint-config-prettier": "^1.6.0",
     "eslint-plugin-react": "^3.16.1",
-    "flow-bin": "^0.45.0",
+    "flow-bin": "^0.57.3",
     "gh-pages": "^0.12.0",
     "prettier": "^1.1.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 27d1ee2..fe2b094 100644
--- a/src/index.js
+++ b/src/index.js
@@ -33,7 +33,7 @@ type Props = {
   fgColor: string,
 };
 
-class QRCode extends React.Component {
+class QRCode extends React.Component<Props> {
   props: Props;
   _canvas: ?HTMLCanvasElement;
 
@@ -42,6 +42,8 @@ class QRCode extends React.Component {
     level: 'L',
     bgColor: '#FFFFFF',
     fgColor: '#000000',
+    didGeneratePNGData: null,
+    value: ""
   };
 
   static propTypes = {
@@ -50,11 +52,12 @@ class QRCode extends React.Component {
     level: PropTypes.oneOf(['L', 'M', 'Q', 'H']),
     bgColor: PropTypes.string,
     fgColor: PropTypes.string,
+    didGeneratePNGData: PropTypes.func
   };
 
   shouldComponentUpdate(nextProps: Props) {
     return Object.keys(QRCode.propTypes).some(
-      k => this.props[k] !== nextProps[k]
+      k => this.props[k] !== nextProps[k] && k !== "didGeneratePNGData"
     );
   }
 
@@ -67,7 +70,7 @@ class QRCode extends React.Component {
   }
 
   update() {
-    var {value, size, level, bgColor, fgColor} = this.props;
+    var { value, size, level, bgColor, fgColor } = this.props;
 
     // We'll use type===-1 to force QRCode to automatically pick the best type
     var qrcode = new QRCodeImpl(-1, ErrorCorrectLevel[level]);
@@ -92,8 +95,8 @@ class QRCode extends React.Component {
       canvas.height = canvas.width = size * scale;
       ctx.scale(scale, scale);
 
-      cells.forEach(function(row, rdx) {
-        row.forEach(function(cell, cdx) {
+      cells.forEach(function (row, rdx) {
+        row.forEach(function (cell, cdx) {
           ctx && (ctx.fillStyle = cell ? fgColor : bgColor);
           var w = Math.ceil((cdx + 1) * tileW) - Math.floor(cdx * tileW);
           var h = Math.ceil((rdx + 1) * tileH) - Math.floor(rdx * tileH);
@@ -106,13 +109,17 @@ class QRCode extends React.Component {
             );
         });
       });
+
+      if (this.props.didGeneratePNGData != null) {
+        this.props.didGeneratePNGData(canvas.toDataURL("image/png"));
+      }
     }
   }
 
   render() {
     return (
       <canvas
-        style={{height: this.props.size, width: this.props.size}}
+        style={{ height: this.props.size, width: this.props.size }}
         height={this.props.size}
         width={this.props.size}
         ref={(ref: ?HTMLCanvasElement): ?HTMLCanvasElement =>