@captchafox/react-native NPM

@captchafox/react-native

Installation

Install the library using your prefered package manager

npm install @captchafox/react-native

yarn add @captchafox/react-native

pnpm add @captchafox/react-native

Follow the steps 1 and 2 of the react-native-webview Getting Started Guide.

Usage

import React, { useRef } from 'react';
import { View, Button } from 'react-native';

import { CaptchaFoxModal, CaptchaFoxModalRef } from '@captchafox/react-native';

function Example() {
  const captchaRef = useRef<CaptchaFoxModalRef>(null);

  const submit = () => {
    captchaRef?.current?.show();
  }

  const onVerify = (token) => {
    console.log('Verified:', token);
  }

  const onError = (error) => {
    console.error('Error:', error)
  }

  return (
    <View>
      <CaptchaFoxModal
        ref={captchaRef}
        baseUrl="https://YOUR_DOMAIN"
        siteKey="YOUR_SITE_KEY"
        onVerify={onVerify}
        onError={onError}
      />
      <Button
        title="Submit"
        onPress={submit}
      />
    </View>
  );
}

For more details, see the Example Project.

Props

Prop	Type	Description	Required
siteKey	`string`	The sitekey for the widget	✅
baseUrl	`string`	The base URL that is used for the WebView.	✅
lang	`string`	The language the widget should display. Defaults to automatically detecting it.
mode	`inline\\|popup\\|hidden`	The mode the widget should be displayed in .
theme	`light` \| `dark`	The theme of the widget. Defaults to light.
backdropColor	`string`	Color of the modal backdrop.
modalStyle	`Style`	Custom modal style.
loadingComponent	`ReactNode`	Custom modal loading indicator.
headerComponent	`ReactNode`	Custom modal header.
footerComponent	`ReactNode`	Custom modal footer.
onVerify	`function`	Called with the response token after successful verification.
onFail	`function`	Called after unsuccessful verification.
onError	`function`	Called when an error occured.
onExpire	`function`	Called when the challenge expires.
onClose	`function`	Called when the challenge was closed.
onError	`function`	Called when an error occured.
onLoad	`function`	Called after the widget has been loaded.

Methods

Name	Type	Description
show	`function`	Show the CaptchaFox Modal.
hide	`function`	Hide the CaptchaFox Modal.

Customizing

The package exports the base CaptchaFox component to allow using it directly or creating custom modal screens. This base component is used in the CaptchaFoxModal with a React Native Modal around it.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

react-native ios android

@captchafox/types

1.0.1

7 months ago

1.0.0

7 months ago