add didGeneratePNGData callback prop

README.md

@@ -22,13 +22,14 @@ React.render(
 
 ## Available Props
 
-prop      | type                 | default value
-----------|----------------------|--------------
-`value`   | `string`             |
-`size`    | `number`             | `128`
-`bgColor` | `string` (CSS color) | `"#FFFFFF"`
-`fgColor` | `string` (CSS color) | `"#000000"`
-`level`   | `string` (`'L' 'M' 'Q' 'H'`)            | `'L'`
+prop                   | type                          | default value
+-----------------------|-------------------------------|--------------
+`value`                | `string`                      |
+`size`                 | `number`                      | `128`
+`bgColor`              | `string` (CSS color)          | `"#FFFFFF"`
+`fgColor`              | `string` (CSS color)          | `"#000000"`
+`level`                | `string` (`'L' 'M' 'Q' 'H'`)  | `'L'`
+`didGeneratePNGData`   | `(string) => void`            |
 
 <img src="qrcode.png" height="256" width="256">
 

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"
   }
-}
+}

src/index.js

@@ -31,9 +31,10 @@ type Props = {
   level: $Keys<typeof ErrorCorrectLevel>,
   bgColor: string,
   fgColor: string,
+  didGeneratePNGData: (string) => void
 };
 
-class QRCode extends React.Component {
+class QRCode extends React.Component<Props> {
   props: Props;
   _canvas: ?HTMLCanvasElement;
 
@@ -42,6 +43,8 @@ class QRCode extends React.Component {
     level: 'L',
     bgColor: '#FFFFFF',
     fgColor: '#000000',
+    didGeneratePNGData: null,
+    value: ""
   };
 
   static propTypes = {
@@ -50,11 +53,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"
     );
   }
 
@@ -106,6 +110,10 @@ class QRCode extends React.Component {
             );
         });
       });
+
+      if (this.props.didGeneratePNGData != null) {
+        this.props.didGeneratePNGData(canvas.toDataURL("image/png"));
+      }
     }
   }