From beae39be725fa6f4b124e4b6758e7aed219432bd Mon Sep 17 00:00:00 2001 From: exzos Date: Thu, 9 May 2024 18:26:35 +0200 Subject: [PATCH] feat: add basic implementation --- README.md | 41 +- example/README.md | 13 + example/babel.config.js | 1 + example/package.json | 11 +- example/src/App.tsx | 47 +- example/src/ModalExample.tsx | 47 + example/src/RecaptchaProvider.tsx | 14 + example/tsconfig.json | 2 +- example/types/env.d.ts | 4 + package.json | 12 +- screenshot/1.png | Bin 0 -> 88395 bytes screenshot/2.png | Bin 0 -> 1802535 bytes src/Recaptcha/Recaptcha.tsx | 289 + src/Recaptcha/get-template.ts | 194 + src/Recaptcha/index.ts | 2 + src/Recaptcha/utils.ts | 56 + src/index.tsx | 4 +- yarn.lock | 18251 ++++++++++++++++++++++++++++ 18 files changed, 18949 insertions(+), 39 deletions(-) create mode 100644 example/README.md create mode 100644 example/src/ModalExample.tsx create mode 100644 example/src/RecaptchaProvider.tsx create mode 100644 example/types/env.d.ts create mode 100644 screenshot/1.png create mode 100644 screenshot/2.png create mode 100644 src/Recaptcha/Recaptcha.tsx create mode 100644 src/Recaptcha/get-template.ts create mode 100644 src/Recaptcha/index.ts create mode 100644 src/Recaptcha/utils.ts create mode 100644 yarn.lock diff --git a/README.md b/README.md index d6f1a75..beb6a18 100644 --- a/README.md +++ b/README.md @@ -5,24 +5,45 @@ Google reCAPTCHA provider for react native projects ## Installation ```sh -npm install react-native-google-recaptcha-provider +yarn add react-native-google-recaptcha-provider ``` -## Usage +## Overview -```js -import { multiply } from 'react-native-google-recaptcha-provider'; +_react-native-google-recaptcha-provider_ is a library for integrating Google reCAPTCHA into React Native applications. It provides a convenient way to add and customize reCAPTCHA in your application to prevent spam and abuse. -// ... +## Example -const result = await multiply(3, 7); -``` +[You can find a usage example here](./example) + +## Customization + +The library provides various customization options such as specifying the size, theme, language, and action associated with the reCAPTCHA widget. -## Contributing +## Method and Field Descriptions -See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. +### __GoogleRecaptchaProps__ +| Prop Name | Type | Required | Description | +|--------------------|--------------------------------------------------------|----------|--------------------------------------------------------------------------------------------------| +| siteKey | string | Yes | The site key obtained from Google reCAPTCHA. | +| baseUrl | string | Yes | The base URL of the website where reCAPTCHA is being used. | +| onVerify | (token: string) => void | Yes | Callback function invoked when reCAPTCHA token is successfully verified. | +| onExpire | () => void | No | Callback function invoked when the reCAPTCHA token expires. | +| onError | (error: any) => void | No | Callback function invoked when an error occurs during reCAPTCHA verification. | +| onClose | () => void | No | Callback function invoked when the reCAPTCHA widget is closed without completing. | +| onLoad | () => void | No | Callback function invoked when the WebView finishes loading the HTML content. | +| loadingComponent | ReactNode | No | A custom loading component to display while reCAPTCHA is loading. | +| webViewProps | Omit | No | Additional props to be passed to the underlying WebView component. | +| lang | string | No | The language code to use for reCAPTCHA. | +| size | 'normal' \| 'compact' \| 'invisible' | No | The size of the reCAPTCHA widget. Possible values: 'normal', 'compact', 'invisible'. Default is 'normal'. | +| theme | 'light' \| 'dark' | No | The theme of the reCAPTCHA widget. Possible values: 'light', 'dark'. Default is 'light'. | +| enterprise | boolean | No | Specifies whether to use the new reCAPTCHA Enterprise API. Default is false. | +| action | string | No | An additional parameter for specifying the action name associated with the protected element. | +| recaptchaDomain | string | No | The domain of the reCAPTCHA service. Defaults to 'www.google.com'. | +| gstaticDomain | string | No | The domain of the Google static content. Defaults to 'www.gstatic.com'. | +| hideBadge | boolean | No | Specifies whether to hide the reCAPTCHA badge. Defaults to false. | +| style | StyleProp\ | No | The style object or stylesheet for the root container of the component. | -## License MIT diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..0345089 --- /dev/null +++ b/example/README.md @@ -0,0 +1,13 @@ +# Example Usage + +The reCAPTCHA component is implemented in such a way that it stretches to the full available width and height by default. Users are expected to implement their own modal window for displaying the reCAPTCHA challenge. + +## Implementation + +To see an example implementation of how to use `react-native-google-recaptcha-provider`, you can refer to the `ModalExample.tsx`. This file demonstrates how to integrate the reCAPTCHA component within a modal window. + + +## Screenshots + +1 +1 diff --git a/example/babel.config.js b/example/babel.config.js index b85e43d..a451ca2 100644 --- a/example/babel.config.js +++ b/example/babel.config.js @@ -17,6 +17,7 @@ module.exports = function (api) { }, }, ], + ['module:react-native-dotenv'], ], }; }; diff --git a/example/package.json b/example/package.json index 3d80bba..f0fc9fa 100644 --- a/example/package.json +++ b/example/package.json @@ -12,15 +12,18 @@ "expo": "~50.0.17", "expo-status-bar": "~1.11.1", "react": "18.2.0", - "react-native": "0.73.6", "react-dom": "18.2.0", - "react-native-web": "~0.19.6" + "react-native": "0.73.6", + "react-native-safe-area-context": "^4.10.1", + "react-native-web": "~0.19.6", + "react-native-webview": "^13.8.7" }, "devDependencies": { "@babel/core": "^7.20.0", - "babel-plugin-module-resolver": "^5.0.0", "@expo/webpack-config": "^18.0.1", - "babel-loader": "^8.1.0" + "babel-loader": "^8.1.0", + "babel-plugin-module-resolver": "^5.0.0", + "react-native-dotenv": "^3.4.11" }, "private": true } diff --git a/example/src/App.tsx b/example/src/App.tsx index 3563b2f..8398140 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,31 +1,42 @@ -import * as React from 'react'; +import React, { useState } from 'react'; -import { StyleSheet, View, Text } from 'react-native'; -import { multiply } from 'react-native-google-recaptcha-provider'; +import { StyleSheet, Button, Alert } from 'react-native'; +import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; +import { RecaptchaModal } from './ModalExample'; -export default function App() { - const [result, setResult] = React.useState(); - - React.useEffect(() => { - multiply(3, 7).then(setResult); - }, []); +export default function Root() { + return ( + + + + ); +} +function App() { + const [modalIsVisible, setModalIsVisible] = useState(false); return ( - - Result: {result} - + +