Typescript and deps update.

Author: szchenghuang

.babelrc

@@ -1,4 +1,10 @@
 {
-    "presets" : ["es2015", "react"],
-    "plugins" : ["transform-object-rest-spread"]
+    "presets" : [
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript",
+    ],
+    "plugins": [
+        "@babel/plugin-transform-typescript"
+    ]
 }

.eslintrc

@@ -1,46 +1,17 @@
 {
-    "parser": "babel-eslint",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true,
-            "experimentalObjectRestSpread": true,
-            "modules": true
-        }
+    parser: "@typescript-eslint/parser",
+    plugins: ["@typescript-eslint"],
+    env: {
+        "browser": true
     },
-    "env": {
-        "es6": true,
-        "browser": true,
-        "node": true,
-        "amd": true,
-        "jquery": true
-    },
-    "extends": [ "eslint:recommended" ],
-    "plugins": [
-        "react"
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
     ],
-    "rules": {
-        "block-spacing": [1, "always"],
-        "comma-spacing": [1, {"before": false, "after": true}],
-        "computed-property-spacing": [1, "always"],
-        "curly": [1, "all"],
-        "indent": [1, 2],
-        "key-spacing": [1, {"beforeColon": false, "afterColon": true}],
-        "keyword-spacing": [2, {"before": true, "after": true}],
-        "linebreak-style": [1, "unix"],
-        "no-const-assign": 2,
-        "no-extra-semi": 1,
-        "no-console": 1,
-        "no-extra-boolean-cast": 1,
-        "no-mixed-spaces-and-tabs": 1,
-        "no-unused-vars": 1,
-        "no-unreachable": 1,
-        "no-multiple-empty-lines": [1, {max: 1, maxEOF: 0, maxBOF: 0}],
-        "object-curly-spacing": [1, "always"],
-        "prefer-const": 1,
-        "react/jsx-no-undef": 1,
-        "react/jsx-uses-react": 1,
-        "react/jsx-uses-vars": 1,
-        "strict": 0,
-        "semi": [1, "always"]
+    settings: {
+        react: {
+            version: 'detect',
+        },
     }
 }

README.md

@@ -4,6 +4,21 @@ A React component which is interested in only Google invisible reCAPTCHA.
 
 * Support multiple reCAPTCHA widgets on one page.
 * Support React hooks.
+* Support Typescript.
+
+## Migration from 0.x to 1.0.0
+
+```js
+// Version 0.x
+<Recaptcha ref={ref => this.recaptcha = ref} ... />
+// this.recaptcha.execute invokes the reCAPTCHA check.
+
+// Version 1.0.0
+const refCaptcha = React.useRef(null) // or React.createRef().
+<Recaptcha ref={refRecaptcha} ... />
+// refRecaptcha.current.callbacks.execute invokes the reCAPTCHA check.
+//             ^^^^^^^^^^^^^^^^^^
+```
 
 ## [Demo][demo] ##
 
@@ -27,9 +42,9 @@ npm install react-google-invisible-recaptcha --save
 import Recaptcha from 'react-google-invisible-recaptcha';
 
 <Recaptcha
+  onResolved={() => console.log('Human detected.')} />
   ref={refRecaptcha}
   sitekey={<sitekey>}
-  onResolved={() => console.log('Human detected.')} />
 ```
 
 ## Configuration ##
@@ -66,18 +81,6 @@ this.refRecaptcha = React.createRef();
 // refRecaptcha.current.callbacks.getResponse function which returns the response token.
 ```
 
-## Migration from 0.x to 1.0.0
-
-```js
-// version 0.x
-<Recaptcha ref={ref => this.recaptcha = ref} ... />
-// this.recaptcha.execute invokes the reCAPTCHA check.
-
-// version 1.0.0
-<Recaptcha ref={refRecaptcha} ... />
-// refRecaptcha.current.callbacks.execute invokes the reCAPTCHA check.
-```
-
 ## License ##
 
 MIT. See [LICENSE.md](http://github.com/szchenghuang/react-google-invisible-recaptcha/blob/master/LICENSE.md) for details.

dist/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+declare global {
+    interface Window {
+        grecaptcha: {
+            render?: (wrapper: HTMLElement, options: {
+                badge: Props['badge'];
+                callback: string;
+                'error-callback': () => void;
+                'expired-callback': () => void;
+                sitekey: string;
+                size: 'invisible';
+                tabindex: number;
+            }) => string;
+            execute?: (recaptchaId: string) => void;
+            reset?: (recaptchaId: string) => void;
+            getResponse?: (recaptchaId: string) => string;
+        };
+        GoogleRecaptchaLoaded: () => void;
+    }
+}
+export declare type Callbacks = {
+    execute: () => void;
+    getResponse: () => string | undefined;
+    reset: () => void;
+};
+declare type Props = {
+    badge?: 'bottomright' | 'bottomleft' | 'inline';
+    locale?: string;
+    nonce?: string;
+    onExpired?: () => void;
+    onError?: () => void;
+    onLoaded?: () => void;
+    onResolved?: () => void;
+    sitekey: string;
+    style?: React.CSSProperties;
+    tabindex?: number;
+};
+declare const GoogleRecaptcha: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement & {
+    callbacks?: Callbacks | undefined;
+}>>;
+export default GoogleRecaptcha;