@zerkalica/react-google-recaptcha

0.5.0-1 • Public • Published

react-google-recaptcha

Build Status npm version Dependencies Dev Dependencies

Component wrapper for Google reCAPTCHA v2

Installation

npm install --save react-google-recaptcha

React 0.13

With 0.13, install version 0.4.0

npm install --save react-google-recaptcha@0.4.0

Usage

All you need to do is sign up for an API key pair. You will need the client key.

You can then use the reCAPTCHA. The default require, imports a wrapped component that loads the reCAPTCHA script asynchronously.

var React = require("react");
var render = require("react-dom").render
var ReCAPTCHA = require("react-google-recaptcha");

function onChange(value) {
  console.log("Captcha value:", value);
}

render(
    <ReCAPTCHA
      ref="recaptcha"
      sitekey="Your client site key"
      onChange={onChange}
    />, 
    document.body
);

Rendering Props

Other properties can be used to customised the rendering.

Name Type Description
sitekey string The API client key
onChange func The function to be called when the user completes successfully the captcha
theme enum optional light or dark The them of the widget (defaults: light)
type enum optional image or audio The type of initial captcha (defaults: image)
tabindex number optional The tabindex on the element (default: 0)
onExpired func optional callback when the challenge is expired and has to be redone by user. By default it will call the onChange with null to signify expired callback.

Component API

The component also has some utility functions that can be called.

  • getValue() returns the value of the captcha field
  • reset() forces reset. See the JavaScript API doc

Advanced usage

You can also use the barebone components doing the following. Using that component will oblige you to manage the grecaptcha dep and load the script by yourself.

var React = require("react");
var render = require("react-dom").render
var ReCAPTCHA = require("react-google-recaptcha/lib/recaptcha");

var grecaptchaObject = grecaptcha // You must provide access to the google grecaptcha object.

function onChange(value) {
  console.log("Captcha value:", value);
}

render(
    <ReCAPTCHA
      ref="recaptcha"
      sitekey="Your client site key"
      onChange={onChange}
      grecaptcha={grecaptchaObject}
    />, 
    document.body
);

Package Sidebar

Install

npm i @zerkalica/react-google-recaptcha

Weekly Downloads

1

Version

0.5.0-1

License

MIT

Last publish

Collaborators

  • zerkalica