refining types definition

douglasjunior · Dec 22, 2020 · 378a08a · 378a08a
1 parent 37411cd
commit 378a08a
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -28,50 +28,91 @@ _See the [`react-native-webview` Getting Started Guide](https://github.com/react
 
 ## Usage
 
+With <strong>JavaScript</strong>:
+
 ```jsx
-import React, { Component, createRef } from 'react';
+import React, { useRef } from 'react';
 import { View, Button } from 'react-native';
 
 import Recaptcha from 'react-native-recaptcha-that-works';
 
-class App extends Component {
-
-    constructor(props) {
-        super(props);
-        this.recaptcha = createRef();
-    }
+const App = () => {
+    const recaptcha = useRef();
 
-    send = () => {
+    const send = () => {
         console.log('send!');
         this.recaptcha.current.open();
     }
 
-    onVerify = token => {
+    const onVerify = token => {
         console.log('success!', token);
     }
 
-    onExpire = () => {
+    const onExpire = () => {
         console.warn('expired!');
     }
 
-    render() {
-        return (
-            <View>
-                <Recaptcha
-                    ref={this.recaptcha}
-                    siteKey="<your-recaptcha-public-key>"
-                    baseUrl="http://my.domain.com"
-                    onVerify={this.onVerify}
-                    onExpire={this.onExpire}
-                    size="invisible"
-                />
-                <Button title="Send" onPress={this.send} />
-            </View>
-        )
+    return (
+        <View>
+            <Recaptcha
+                ref={recaptcha}
+                siteKey="<your-recaptcha-public-key>"
+                baseUrl="http://my.domain.com"
+                onVerify={onVerify}
+                onExpire={onExpire}
+                size="invisible"
+            />
+            <Button title="Send" onPress={send} />
+        </View>
+    );
+}
+```
+
+<details>
+    <summary>Or with <strong>TypeScript</strong>:</summary>
+
+```tsx
+import React, { useRef } from 'react';
+import { View, Button } from 'react-native';
+
+import Recaptcha, { RecaptchaHandles } from "react-native-recaptcha-that-works";
+
+// ...
+
+export const Component: React.FC = () => {
+    const recaptcha = useRef<RecaptchaHandles>();
+
+    const send = () => {
+        console.log('send!');
+        recaptcha.current?.open();
+    };
+
+    const onVerify = (token: string) => {
+        console.log('success!', token);
+    };
+
+    const onExpire = () => {
+        console.warn('expired!');
     }
 
-}
+    return (
+        <View>
+            <Recaptcha
+                ref={recaptcha}
+                siteKey="<your-recaptcha-public-key>"
+                baseUrl="http://my.domain.com"
+                onVerify={onVerify}
+                onExpire={onExpire}
+                size="invisible"
+            />
+            <Button title="Send" onPress={send} />
+        </View>
+    );
+};
 ```
+</details>
+
+<br />
 
 For more details, see the [Sample Project](https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/Sample/src/App.js) or try the [Online demo](https://snack.expo.io/@douglasjunior/a6aed2).
 
@@ -107,42 +148,6 @@ Note: If using `size="invisible"`, then challange run automatically when `open`
 - [I'm not a robot](https://developers.google.com/recaptcha/docs/display)
 - [Invisible](https://developers.google.com/recaptcha/docs/invisible)
 
-## TypeScript
-
-Example usage in TypeScript project:
-
-```tsx
-import Recaptcha, { Handles } from "react-native-recaptcha-that-works";
-
-// ...
-
-export const Component: React.FC = () => {
-    const recaptcha = React.useRef<Handles>(null);
-
-    const send = () => {
-        console.log('send!');
-        recaptcha.current?.open();
-    };
-
-    const onVerify = (token: string) => {
-        console.log('success!', token);
-    };
-
-    return (
-        <View>
-            <Recaptcha
-                ref={recaptcha}
-                siteKey="<your-recaptcha-public-key>"
-                baseUrl="http://my.domain.com"
-                onVerify={onVerify}
-                size="invisible"
-            />
-            <Button title="Send" onPress={send} />
-        </View>
-    );
-};
-```
-
 ## Contribute
 
 New features, bug fixes and improvements are welcome! For questions and suggestions use the [issues](https://github.com/douglasjunior/react-native-recaptcha-that-works/issues).

diff --git a/types.d.ts → index.d.ts b/types.d.ts → index.d.ts
@@ -21,27 +21,32 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React, { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
-export declare type Props = {
-  headerComponent?: ReactNode;
-  onVerify?: (token: string) => void;
-  onExpire?: () => void;
-  onError?: (error: string) => void;
-  onClose?: () => void;
-  onLoad?: () => void;
-  theme?: "dark" | "light";
-  size?: "invisible" | "normal" | "compact";
-  siteKey: string;
-  baseUrl: string;
-  lang?: string;
-  style?: StyleProp<ViewStyle>;
+
+export declare type RecaptchaProps = {
+    headerComponent?: ReactNode;
+    onVerify?: (token: string) => void;
+    onExpire?: () => void;
+    onError?: (error: string) => void;
+    onClose?: () => void;
+    onLoad?: () => void;
+    theme?: "dark" | "light";
+    size?: "invisible" | "normal" | "compact";
+    siteKey: string;
+    baseUrl: string;
+    lang?: string;
+    style?: StyleProp<ViewStyle>;
 };
-export declare type Handles = {
-  open(): void;
-  close(): void;
+
+export declare type RecaptchaHandles = {
+    open(): void;
+    close(): void;
 };
+
 declare const Recaptcha: React.ForwardRefExoticComponent<
-  Props & React.RefAttributes<Handles>
+    RecaptchaProps & React.RefAttributes<RecaptchaHandles>
 >;
+
 export default Recaptcha;
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "react-native-recaptcha-that-works",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "description": "⚛ A reCAPTCHA bridge for React Native that works.",
   "repository": {
     "type": "git",
     "url": "https://github.com/douglasjunior/react-native-recaptcha-that-works.git"
   },
   "main": "index.js",
-  "types": "types.d.ts",
+  "types": "index.d.ts",
   "keywords": [
     "react-native",
     "ios",