Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

react-recaptcha-that-works

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-recaptcha-that-works

⚛ A reCAPTCHA bridge for React that works.

2.0.1
latest
Source
npm

Version published: last year

Weekly downloads: 2.2K; decreased by-15.96%

Maintainers: 1

Weekly downloads

Created: 6 years ago

Source

reCAPTCHA for React

A reCAPTCHA library for React that works.

Looking for React Native version?

Install

Install the module

  yarn add react-recaptcha-that-works

  npm i -S react-recaptcha-that-works

Import the reCAPTCHA script

<html>
    <head>
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    </head>
    <body>
        ...
    </body>
</html>

Usage

I'm not a robot

import React, { Component } from 'react';

import Recaptcha from 'react-recaptcha-that-works';

class App extends Component {

    send = () => {
        console.log('send!', this.state.token);
    }

    onVerify = token => {
        console.log('success!', token);
        this.setState({ token });
    }

    onExpire = () => {
        console.warn('expired!');
    }

    render() {
        return (
            <div>
                <input type="text" placeholder="Username" />
                <input type="password" placeholder="Password" />
                <Recaptcha
                    siteKey="<your-recaptcha-public-key>"
                    onVerify={this.onVerify}
                    onExpire={this.onExpire}
                />
                <button onClick={this.send}>Send</button>
            </div>
        )
    }
}

Invisible

import React, { Component } from 'react';

import Recaptcha from 'react-recaptcha-that-works';

class App extends Component {

    send = () => {
        console.log('send!');
        this.recaptcha.execute();
    }

    onVerify = token => {
        console.log('success!', token);
    }

    onExpire = () => {
        console.warn('expired!');
    }

    render() {
        return (
            <div>
                <input type="text" placeholder="Username" />
                <input type="password" placeholder="Password" />
                <Recaptcha
                    ref={ref = this.recaptcha = ref}
                    siteKey="<your-recaptcha-public-key>"
                    onVerify={this.onVerify}
                    onExpire={this.onExpire}
                    size="invisible"
                />
                <button onClick={this.send}>Send</button>
            </div>
        )
    }
}

TypeScript

import React, { useRef } from 'react';

import Recaptcha, { RecaptchaRef } from "react-recaptcha-that-works";

// ...

export const Component: React.FC = () => {
    const recaptcha = useRef<RecaptchaRef>(null);

    const send = () => {
        console.log('send!');
        recaptcha.current?.execute();
    };

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

    const onExpire = () => {
        console.warn('expired!');
    }

    return (
        <div>
            <Recaptcha
                ref={recaptcha}
                siteKey="<your-recaptcha-public-key>"
                onVerify={onVerify}
                onExpire={onExpire}
                size="invisible"
            />
            <button onClick={send}>
                Send
            </button>
        </div>
    );
};

For more details, see the Sample Project.

Props

Name	Value	Default	Description
siteKey			Your sitekey.
size	`'invisible'`, `'normal'` or `'compact'`	`'normal'`	The size of the widget.
theme	`'dark'` or `'light'`	`'light'`	The color theme of the widget.
onLoad	`function()`		A callback function, executed when the reCAPTCHA is ready to use.
onVerify	`function(token)`		A callback function, executed when the user submits a successful response. The reCAPTCHA response token is passed to your callback.
onExpire	`function()`		A callback function, executed when the reCAPTCHA response expires and the user needs to re-verify.
onError	`function()`		A callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.
onClose	`function()`		(Experimental) A callback function, executed when the challenge window is closed.

React Ref Methods

Name	Type	Description
execute	`function`	Executes the challenge in "invisible" mode.
reset	`function`	Resets the reCAPTCHA state.

reCAPTCHA v2 docs

Contribute

New features, bug fixes and improvements are welcome! For questions and suggestions, use the issues.

License

The MIT License (MIT)

Copyright (c) 2018 Douglas Nassif Roma Junior

See the full license file.

Keywords

FAQs

What is react-recaptcha-that-works?

Is react-recaptcha-that-works popular?

Is react-recaptcha-that-works well maintained?

Package last updated on 23 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install