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

@stowklab/react-google-invisible-recaptcha

v0.0.1

Published

A React component which is simply interested in Google invisible reCaptcha.

Downloads

3

Readme

react-google-invisible-recaptcha

A React component which is simply interested in Google invisible reCAPTCHA.

  • Support multiple reCAPTCHA widgets on one page.
  • Vanilla JS.

Demo

Type something in an input box and click the button to submit data. The value is then checked to make up example client-side validation. Only valid input triggers reCAPTCHA. Since the reCAPTCHA is invisible, it proceeds most likely as if none is attached. You will only be present the figure of the reCAPTCHA when Google hesitates to tell your identity.

When reCAPTCHA is resolved, the demo page shows the result token for demo purpose. In a real application, it should be used with a HTTP request targeting at https://www.google.com/recaptcha/api/siteverify?secret=<secret>&response=<token> on the server to validate the reCAPTCHA result before any sensitive operation is performed. Checking input values derived from clients on the server imporves security as well.

Example

Below is a component which coordinates the procedure.

class Example extends React.Component {
  constructor( props ) {
    super( props );
    this.state = { value: '' };
    this.onSubmit = this.onSubmit.bind( this );
    this.onResolved = this.onResolved.bind( this );
  }
  render() {
    return (
      <div>
        <input
          type="text"
          value={ this.state.value }
          onChange={ event => this.setState( { value: event.target.value } ) } />
        <button onClick={ this.onSubmit }>Submit</button>
        <Recaptcha
          ref={ ref => this.recaptcha = ref }
          sitekey="<sitekey>"
          onResolved={ this.onResolved } />
      </div>
    );
  }
  onSubmit() {
    if ( '' == this.state.value ) {
      alert( 'Validation failed! Input cannot be empty.' );
      this.recaptcha.reset();
    } else {
      this.recaptcha.execute();
    }
  }
  onResolved() {
    alert( 'Recaptcha resolved with response: ' + this.recaptcha.getResponse() );
  }
}

Install

npm install react-google-invisible-recaptcha --save

Usage

import Recaptcha from 'react-google-invisible-recaptcha';

<Recaptcha
  ref={ ref => this.recaptcha = ref }
  sitekey={ <sitekey> }
  onResolved={ () => console.log( 'Human detected.' ) } />

Configuration

Set required props to get going.

  • sitekey: sitekey for your recaptcha. Required.

A few optional props you can tweak.

  • badge: bottomright, bottomleft, or inline. Default: bottomright.
  • locale: in which language it speaks. Default: en.
  • nonce: nonce included in the reCAPTCHA script tag. Default: undefined.
  • onResolved: callback when the recaptcha is resolved. Default: noop.
  • onError: callback when the recaptcha encounters an error. Default: noop.
  • onExpired: callback when the recaptcha response expires. Default: noop.
  • onLoaded: callback when the recaptcha is loaded. Default: noop.
  • style: custom CSS applied to the root node. Default: undefined.
  • tabindex: tabindex of the challenge. Default: 0.

APIs

<Recaptcha ref={ ref => this.recaptcha = ref } ... />
  • this.recaptcha.execute function which invokes the reCAPTCHA check.
  • this.recaptcha.reset function which resets the reCAPTCHA widget.
  • this.recaptcha.getResponse function which returns the response token.

License

MIT. See LICENSE.md for details.