@captchafox/react-native
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

@captchafox/react-native

NPM version

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.

Package Sidebar

Install

npm i @captchafox/react-native

Weekly Downloads

6

Version

1.0.1

License

MIT

Unpacked Size

44.9 kB

Total Files

25

Last publish

Collaborators

  • tgrassl
  • captchafox-npm