react-grecaptcha

React.js Google reCAPTCHA v2 integration component.

Feature

1. Isomorphic support. (Only render on client side.)
2. Lazy load scripts for routing.
3. Automatically render the reCAPTCHA widget.
4. I18n support. https://developers.google.com/recaptcha/docs/language
5. Simple to use.

Demo

1. Storybook: react-grecaptcha.netlify.com
2. Webpackbin: webpackbin.com/bins/-KjCPM_MB-WIp-vxaBCy

Installation

$ yarn add react-grecaptcha

Usage

import Recaptcha from 'react-grecaptcha';
 
const verifyCallback = response => console.log(response);
const expiredCallback = () => {...};
 
<Recaptcha
  sitekey={RECAPTCHA_SITE_KEY}
  callback={verifyCallback}
  expiredCallback={expiredCallback}
  locale="zh-TW"
  className="customClassName"
 
  // Other props will be passed into the component.
  data-theme="dark"
/>

API

• To reset the recaptcha:

window.grecaptcha.reset();
 
// You can use other functions the same way.
window.grecaptcha.execute
window.grecaptcha.getResponse
window.grecaptcha.render
...

Development

Requirements

• node >= 9.4.0
• yarn >= 1.3.2

$ yarn install --pure-lockfile
$ yarn start

Test

$ yarn run format
$ yarn run eslint
$ yarn run test:watch
$ yarn run build
$ yarn run build-storybook

CONTRIBUTING

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests ($ yarn test).

CHANGELOG

LICENSE

MIT: http://michaelhsu.mit-license.org