🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

recaptcha-v3-react

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

recaptcha-v3-react

This library helps to integrate google recaptcha into your react project easily.

3.0.3
latest
Source
npm
Version published
Weekly downloads
253
-71.89%
Maintainers
1
Weekly downloads
 
Created
Source

recaptcha-v3-react

Current version 3.0.0 supports Promises instead of callbacks, Thanks to @awwit for contribution.

This component is created in order to make the experience of integrating Google ReCaptcha into React apps easier and smoother.

Currently, we are using ReCaptcha V3, which is still in beta version; so, we will update our component when they release the stable version.

P.S. It will open the ReCaptcha window only when there are some doubts by Google; otherwise, it will automatically generate the recaptcha token.

Installation

npm install recaptcha-v3-react --save

Usage

First of all, get your site key for ReCaptcha V3 here

There are two steps that you need to implement.

1. Use loadReCaptcha() to initialize the ReCaptcha

This function should be imported and called in the main (parent) component of your app. We recommend calling it in componentDidMount() of App.js.

2. Use ReCaptcha to integrate ReCaptcha in a particular component

invisible Recaptcha

Create a new component with the following code and give it a try!

import React, { Component } from 'react'
import { ReCaptcha, loadRecaptcha } from 'recaptcha-v3-react'

const verifyCallback = token => {
  // Here you will get the final token!!!
  console.log('verifycallback token:', token)
}

class Example extends Component {
  componentDidMount () {
    loadRecaptcha({
      key:'your_site_key',
      id: 'uniqueId'
    })
      .then(id => {
        console.log('ReCaptcha loaded', id)
      })
      .catch((e, id) => {
        console.error('Error when load ReCaptcha', id, e)
      })
  }

  render () {
    return (
      <div>
        <ReCaptcha
          action='main'
          sitekey='your_recapcha_key'
          verifyCallback={verifyCallback}
        />

        <h2>Google ReCaptcha with React</h2>

        <code>
          1. Add <strong>your site key</strong> in the ReCaptcha component. <br />
          2. Check <strong>console</strong> to see the token.
        </code>

        <header>
          <h1>Thanks for using `recaptcha-v3-react`</h1>
        </header>
      </div>
    )
  }
}

export default Example

Keywords

react

FAQs

Package last updated on 03 Feb 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts