npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-custom-google-recaptcha

v0.0.1

Published

React Component Wrapper for Google reCAPTCHA

Downloads

7

Readme

react-google-recaptcha

Build Status npm version npm downloads Dependencies

Edit react-google-recaptcha example

React component for Google reCAPTCHA v2.

Installation

npm install --save react-google-recaptcha

Usage

All you need to do is sign up for an API key pair. You will need the client key then you can use <ReCAPTCHA />.

The default usage imports a wrapped component that loads the google recaptcha script asynchronously then instantiates a reCAPTCHA the user can then interact with.

Code Example:

import ReCAPTCHA from "react-google-recaptcha";

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

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

Component Props

Properties used to customise the rendering:

| Name | Type | Description | |:---- | ---- | ------ | | sitekey | string | The API client key | | onChange | func | The function to be called when the user successfully completes the captcha | | theme | enum | optional light or dark The theme of the widget (defaults: light). See example | 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. | | onErrored | func | optional callback when the challenge errored, most likely due to network issues. | | stoken | string | optional set the stoken parameter, which allows the captcha to be used from different domains, see reCAPTCHA secure-token | | hl | string | optional set the hl parameter, which allows the captcha to be used from different languages, see reCAPTCHA hl | | size | enum | optional compact, normal or invisible. This allows you to change the size or do an invisible captcha | | badge | enum | optional bottomright, bottomleft or inline. Positions reCAPTCHA badge. Only for invisible reCAPTCHA |

Component Instance API

The component instance also has some utility functions that can be called. These can be accessed via ref.

  • getValue() returns the value of the captcha field
  • getWidgetId() returns the recaptcha widget Id
  • reset() forces reset. See the JavaScript API doc
  • execute() programmatically invoke the challenge

Example:

const recaptchaRef = React.createRef();
...
onSubmit = () => {
  const recaptchaValue = recaptchaRef.current.getValue();
  this.props.onSubmit(recaptchaValue);
}
render() {
  return (
    <form onSubmit={this.onSubmit} >
      <ReCAPTCHA
        ref={recaptchaRef}
        sitekey="Your client site key"
        onChange={onChange}
      />
    </form>
  )
}

Invisible reCAPTCHA

Invisible reCAPTCHA

See the reCAPTCHA documentation to see how to configure it.

With the invisible option, you need to handle things a bit differently. You will need to call the execute method yourself.

import ReCAPTCHA from "react-google-recaptcha";

const recaptchaRef = React.createRef();

ReactDOM.render(
  <form onSubmit={() => { recaptchaRef.current.execute(); }}>
    <ReCAPTCHA
      ref={recaptchaRef}
      size="invisible"
      sitekey="Your client site key"
    />
  </form>,
  document.body
);

Advanced usage

Global properties used by reCaptcha

lang: By default google reCaptcha infers the user's interface language. In order to overwrite the language and update the translation for the reCaptcha widget, you can create a global variable configuring the desired language via lang.

useRecaptchaNet: If google.com is blocked, you can set useRecaptchaNet to true so that the component uses recaptcha.net instead.

removeOnUnmount: If you plan to change the lang dynamically, removeOnUnmount should probably be true. This unloads the google recaptcha script on componetWillUnmount to allow for a new google recaptcha script to load next time the reCAPTCHA component is used to facilitate a new language if needed.

Example global properties:

window.recaptchaOptions = {
  lang: 'fr',
  useRecaptchaNet: true,
  removeOnUnmount: false,
};

ReCaptcha loading google recaptcha script manually

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.

import { ReCAPTCHA } from "react-google-recaptcha";

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

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

Notes on Requirements

At least [email protected] is required due to forwardRef usage in the dependency react-async-script.

Notes

Pre 1.0.0 and React < 16.4.1 support details in 0.14.0.