Skip to content

evenchange4/react-grecaptcha

Repository files navigation

react-grecaptcha

React.js Google reCAPTCHA v2 integration component.

Travis Codecov Status npm package npm downloads

Dependency Status devDependency Status peerDependency Status

prettier license

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

storybook

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

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