⚛ A reCAPTCHA bridge for React that works.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
package.json
yarn.lock

README.md

reCAPTCHA for React

Licence MIT npm version npm downloads

A reCAPTCHA library for React that works.

Install

Install the module

  yarn add react-recaptcha-that-works

Or

  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>

Use

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>
        )
    }
}

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(error) 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.

reCAPTCHA v2 docs

Contribute

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

Become a Patron! Donate

Licence

The MIT License (MIT)

Copyright (c) 2018 Douglas Nassif Roma Junior

See the full licence file.