next-recaptcha

reCAPTCHA for your next React app.

🔧 Install

next-recaptcha is available on npm. It can be installed with the following command:

npm install next-recaptcha --save

next-recaptcha is available on yarn as well. It can be installed with the following command:

yarn add next-recaptcha --save

ℹ️ Information

reCAPTCHA Key

You need to create a reCAPTCHA key for your domain, you can register reCAPTCHA v3 keys here.

Enterprise

When you enable to use the enterprise version, you must create new keys. These keys will replace any Site Keys you created in reCAPTCHA. Check the migration guide.

To work properly, you must select the Integration type to be Scoring since is equivalent to the reCAPTCHA v3.

The complete documentation to the enterprise version you can see here.

📖 ReCAPTCHAProvider

ReCAPTCHAProvider provider component should be used to wrap around your components.

ReCAPTCHAProvider is used to load the necessary reCAPTCHA script and provide access to reCAPTCHA to the rest of your application.

In your application need only one provider. You should place it as high as possible in your React tree.

Props

| Props | Type | Default | Required? | Description | | --------- | -------- | ----------- | ------------- | -------- | | reCAPTCHAPKey | boolean | | ✔️ | Your reCAPTCHA key, get one from here | | script | object | | ❌ | | | language | string | | ❌ | Languages that is supported by Google reCAPTCHAP. | | isReCAPTCHAPNet | boolean | false | ❌ | Ue to load script from recaptcha.net. docs | | isEnterprise | boolean | false | ❌ | Enterprise option |

Usages

import { ReCAPTCHAProvider } from 'next-recaptcha';

ReactDom.render(
  <ReCAPTCHAProvider
    reCAPTCHAPKey='[reCAPTCHA key]'
    language='[language]'
    isReCAPTCHAPNet={ true or false}
    isEnterprise={ true or false}
    script={{
      async: false,
      defer: false,
      appendTo: 'head',
      nonce: undefined,
    }}
  >
    <Components />
  </ReCAPTCHAProvider>,
  document.getElementById('app')
);

🎀 ReCAPTCHA

Use to trigger the validation. It provides a prop onVerify, which will be called once the verify is done successfully.

import {
  ReCAPTCHAProvider,
  ReCAPTCHA,
} from 'next-recaptcha';

const handleVerify = (token: string) => {
  // set token
}

ReactDom.render(
  <ReCAPTCHAProvider reCaptchaKey='[reCAPTCHA key]'>
    <ReCAPTCHA onVerify={(token: string) => handleVerify(token)} />
  </ReCAPTCHAProvider>,
  document.getElementById('app')
);

📜 Changelog

Latest version 0.0.1 (2022-02-21):

• ReCAPTCHAProvider
• ReCAPTCHA

❗ Issues

If you think any of the next-recaptcha can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to next-recaptcha by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

• Open pull request with improvements
• Discuss ideas in issues
• Spread the word
• Reach out with any feedback

⚖️ License

The MIT License