Socket
Socket
Sign inDemoInstall

react-hook-recaptcha

Package Overview
Dependencies
6
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.4 to 1.0.5

18

dist/index.js

@@ -80,3 +80,3 @@ 'use strict';

* @param {Function} config.errorCallback executed when recaptcha encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.
* @return {Object}
* @returns {{ execute: Function, recaptchaLoaded: Boolean, recaptchaWidget: Object, reset: Function, }} RecaptchaHook instance
*/

@@ -98,3 +98,3 @@

// https://stackoverflow.com/questions/45240833/what-are-the-benefits-of-explicitly-rendering-recaptcha-widget-as-opposed-to-aut
// explicit rendering is needed because the view template of applicatio may not be loaded yet when recaptcha is loaded
// explicit rendering is needed because the view template of application may not be loaded yet when recaptcha is loaded
useScript(RECAPTCHA_SCRIPT_SRC_URL);

@@ -130,5 +130,17 @@ var [recaptchaLoaded, setRecaptchaLoaded] = react.useState((_window = window) !== null && _window !== void 0 && (_window$grecaptcha = _window.grecaptcha) !== null && _window$grecaptcha !== void 0 && _window$grecaptcha.render ? true : false);

}, [recaptchaLoaded, successCallback, recaptchaWidget, containerId]);
var execute = react.useCallback(() => {
if (recaptchaWidget) {
window.grecaptcha.execute(recaptchaWidget);
}
}, [recaptchaWidget]);
var reset = react.useCallback(() => {
if (recaptchaWidget) {
window.grecaptcha.reset(recaptchaWidget);
}
}, [recaptchaWidget]);
return {
execute,
recaptchaLoaded,
recaptchaWidget
recaptchaWidget,
reset
};

@@ -135,0 +147,0 @@ }

2

package.json
{
"name": "react-hook-recaptcha",
"version": "1.0.4",
"version": "1.0.5",
"description": "React hook for google-recaptcha v2",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

107

README.md

@@ -18,2 +18,3 @@ # react-hook-recaptcha

## useRecaptcha hook parameters explanation
```javascript

@@ -34,2 +35,3 @@ * @param {Object} config configuration of recaptcha

### Example 1 - Checkbox/display reCAPTCHA
![checkbox recaptcha demo](https://github.com/tomliangg/react-hook-recaptcha/blob/main/demo/checkbox_recaptcha.gif)

@@ -40,7 +42,7 @@

```jsx
import React, { useState } from "react";
import { useRecaptcha } from "react-hook-recaptcha";
import React, { useState } from 'react';
import { useRecaptcha } from 'react-hook-recaptcha';
const sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"; // change to your sitekey
const containerId = "test-recaptcha"; // this id can be customized
const sitekey = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'; // change to your sitekey
const containerId = 'test-recaptcha'; // this id can be customized

@@ -59,3 +61,3 @@ export default function CheckboxCaptcha() {

sitekey,
size: "normal",
size: 'normal',
});

@@ -65,6 +67,4 @@

e.preventDefault();
const inputNameValue = document.querySelector("#name").value;
alert(
`Hello ${inputNameValue} \n Recaptcha Response is: ${captchaResponse}`
);
const inputNameValue = document.querySelector('#name').value;
alert(`Hello ${inputNameValue} \n Recaptcha Response is: ${captchaResponse}`);
};

@@ -76,8 +76,3 @@

<label htmlFor="name">name:</label>
<input
type="text"
id="name"
name="name"
style={{ marginRight: "10px" }}
/>
<input type="text" id="name" name="name" style={{ marginRight: '10px' }} />
<button disabled={!captchaResponse} type="submit">

@@ -93,4 +88,4 @@ Submit

### Example 2 - Invisible reCAPTCHA - Programmatically invoke the challenge
### Example 2 - Invisible reCAPTCHA - Programmatically invoke the challenge
![invisible recaptcha demo](https://github.com/tomliangg/react-hook-recaptcha/blob/main/demo/invisible_recaptcha.gif)

@@ -101,20 +96,21 @@

It's more versatile to programmatically invoke the challenge. This way, you can control the flow of resetting and executing recaptcha. This example works well with form that requires validation. Whenever a form fails the validation, you can reset the recaptcha and get a new response in the new submit.
```jsx
import React from "react";
import { useRecaptcha } from "react-hook-recaptcha";
import React from 'react';
import { useRecaptcha } from 'react-hook-recaptcha';
const sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"; // change to your site key
const containerId = "test-recaptcha"; // this id can be customized
const sitekey = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'; // change to your site key
const containerId = 'test-recaptcha'; // this id can be customized
export default function InvisibleCaptcha() {
const successCallback = (response) => {
const inputNameValue = document.querySelector("#name").value;
const inputNameValue = document.querySelector('#name').value;
alert(`Hello ${inputNameValue} \n Recaptcha Response is: ${response}`);
};
const { recaptchaLoaded, recaptchaWidget } = useRecaptcha({
const { recaptchaLoaded, execute, reset } = useRecaptcha({
containerId,
successCallback,
sitekey,
size: "invisible"
size: 'invisible',
});

@@ -125,4 +121,4 @@

if (recaptchaWidget !== null) {
window.grecaptcha.reset(recaptchaWidget);
window.grecaptcha.execute(recaptchaWidget);
reset();
execute();
}

@@ -135,8 +131,3 @@ };

<label htmlFor="name">name:</label>
<input
type="text"
id="name"
name="name"
style={{ marginRight: "10px" }}
/>
<input type="text" id="name" name="name" style={{ marginRight: '10px' }} />
<button disabled={!recaptchaLoaded} type="submit">

@@ -152,3 +143,2 @@ Submit

### Example 3 - Invisible reCAPTCHA - Automatically bind the challenge to a button

@@ -159,12 +149,13 @@

It's very much like Example 2 but a bit simpler. The downside of automatically binding the challenge is that it doesn't work well if the form requires validation because this approach will have a problem resubmitting.
```jsx
import React from "react";
import { useRecaptcha } from "react-hook-recaptcha";
import React from 'react';
import { useRecaptcha } from 'react-hook-recaptcha';
const sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"; // change to your site key
const containerId = "test-recaptcha"; // this id can be customized
const sitekey = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'; // change to your site key
const containerId = 'test-recaptcha'; // this id can be customized
export default function InvisibleCaptcha() {
const successCallback = (response) => {
const inputNameValue = document.querySelector("#name").value;
const inputNameValue = document.querySelector('#name').value;
alert(`Hello ${inputNameValue} \n Recaptcha Response is: ${response}`);

@@ -177,3 +168,3 @@ };

sitekey,
size: "invisible"
size: 'invisible',
});

@@ -185,8 +176,3 @@

<label htmlFor="name">name:</label>
<input
type="text"
id="name"
name="name"
style={{ marginBottom: "20px" }}
/>
<input type="text" id="name" name="name" style={{ marginBottom: '20px' }} />
<button disabled={!recaptchaLoaded} type="submit" id={containerId}>

@@ -201,4 +187,4 @@ Submit

### Example 4 - useRecaptcha hook with a form library
### Example 4 - useRecaptcha hook with a form library
![using with react-hook-form demo](https://github.com/tomliangg/react-hook-recaptcha/blob/main/demo/use_with_form_lib.gif)

@@ -209,9 +195,10 @@

useRecaptcha hook can work with any form libraries. Using react-hook-form for an example:
```jsx
import React from "react";
import { useRecaptcha } from "react-hook-recaptcha";
import { useForm } from "react-hook-form";
import React from 'react';
import { useRecaptcha } from 'react-hook-recaptcha';
import { useForm } from 'react-hook-form';
const sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"; // change to your site key
const containerId = "test-recaptcha"; // this id can be customized
const sitekey = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'; // change to your site key
const containerId = 'test-recaptcha'; // this id can be customized

@@ -221,3 +208,3 @@ export default function Form() {

const onSubmit = (data) => {
let outputMsg = "";
let outputMsg = '';
Object.keys(data).forEach((key) => {

@@ -232,7 +219,7 @@ outputMsg += `${key}: ${data[key]} \n`;

const { recaptchaLoaded, recaptchaWidget } = useRecaptcha({
const { recaptchaLoaded, execute, reset } = useRecaptcha({
containerId,
successCallback,
sitekey,
size: "invisible"
size: 'invisible',
});

@@ -242,6 +229,4 @@

e.preventDefault();
if (recaptchaWidget !== null) {
window.grecaptcha.reset(recaptchaWidget);
window.grecaptcha.execute(recaptchaWidget);
}
reset();
execute();
};

@@ -257,3 +242,3 @@

required: true,
maxLength: 80
maxLength: 80,
})}

@@ -267,7 +252,7 @@ />

ref={register({
required: "This field is required",
required: 'This field is required',
pattern: {
value: /^\S+@\S+$/i,
message: "invalid email format"
}
message: 'invalid email format',
},
})}

@@ -274,0 +259,0 @@ />

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc