evenchange4react-grecaptcha
React.js Google reCAPTCHA v2 integration component.
Feature
- Isomorphic support. (Only render on client side.)
- Lazy load scripts for routing.
- Automatically render the reCAPTCHA widget.
- I18n support. https://developers.google.com/recaptcha/docs/language
- Simple to use.
Demo
- Storybook: react-grecaptcha.netlify.com
- Webpackbin: webpackbin.com/bins/-KjCPM_MB-WIp-vxaBCy
Installation
$ yarn add react-grecaptchaUsage
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 startTest
$ yarn run format
$ yarn run eslint
$ yarn run test:watch
$ yarn run build
$ yarn run build-storybookCONTRIBUTING
- ⇄ 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).