Package Exports

recaptcha-v3
recaptcha-v3/dist/ReCaptcha.js
recaptcha-v3/dist/grecaptcha/grecaptcha
recaptcha-v3/dist/grecaptcha/grecaptcha.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (recaptcha-v3) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

reCAPTCHA-v3

npm bundle size

A simple and easy to use reCAPTCHA (v3 only) library for the browser. (You may be also interested in wrapper libraries)

Install

With NPM:

$ npm install recaptcha-v3

With Yarn:

$ yarn add recaptcha-v3

Prerequisites

To use this package you only need a valid site key for your domain, which you can easily get here.

Usage

With promises:

import { load } from 'recaptcha-v3'

load('<site key>').then((recaptcha) => {
  recaptcha.execute('<action>').then((token) => {
      console.log(token) // Will print the token
    })
})

With async/await:

import { load } from 'recaptcha-v3'

async function asyncFunction() {
  const recaptcha = await load('<site key>')
  const token = await recaptcha.execute('<action>')

  console.log(token) // Will also print the token
}

Loader options

The loader takes care of loading the reCAPTCHA script from Google. Therefore the loader offers optional options for additional configuration:

Name	Description	Type	Default value
useRecaptchaNet	Due to limitations in certain countries it's required to use `recaptcha.net` instead of `google.com`.	boolean	`false`
useEnterprise	Uses the enterprise version of the recaptcha api and handles the differences in the response.	boolean	`false`
autoHideBadge	Will automatically hide the reCAPTCHA badge. Warning: The usage is only allowed if you follow the official guide for hiding the badge from Google (see here)	boolean	`false`
renderParameters	Will add the given parameters to the reCAPTCHA script. The given object will be converted into a query string and will then be added to the URL.	Object	`{}`
explicitRenderParameters	Will set the parameters to the explicit rendering. See here	Object	`{}`

Load options usage

To use the options just pass an additional object to the load(...) method. For example:

import { load } from 'recaptcha-v3'

load('<site key>', {
  useRecaptchaNet: true,
  autoHideBadge: true
}).then((recaptcha) => {

})

Explicit render parameters

The ReCaptcha widget will be explicity loaded, which means you can add parameters to the rendering process.

Name	Description	Type
container	The container if you want to render the inline widget	`string` or `Element`
badge	The positioning for the widget	`'bottomright'` or `'bottomleft'` or `'inline'`
size	The size of the widget	`'invisible'`
tabindex	The tab index of the widget	`number`

Wrapper libraries

Wrapper libraries are available for:

Vue.js plugin (vue-recaptcha-v3 / npm)