reCAPTCHA for your next React app.
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
You need to create a reCAPTCHA key for your domain, you can register reCAPTCHA v3 keys here.
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 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 | Type | Default | Required? | Description |
|---|---|---|---|---|
| reCAPTCHAPKey | boolean | ✔️ | Your reCAPTCHA key, get one from here | |
| script | object | ❌ | ||
| language | string | ❌ | Languages that is supported by Google reCAPTCHAP. | |
| isReCAPTCHANet | boolean | false | ❌ | Ue to load script from recaptcha.net. docs |
| isEnterprise | boolean | false | ❌ | Enterprise option |
import { ReCAPTCHAProvider } from 'next-recaptcha';
ReactDom.render(
<ReCAPTCHAProvider
reCAPTCHAKey='[reCAPTCHA key]'
language='[language]'
isReCAPTCHANet={ true or false}
isEnterprise={ true or false}
script={{
async: false,
defer: false,
appendTo: 'head',
nonce: undefined,
}}
>
<Components />
</ReCAPTCHAProvider>,
document.getElementById('app')
);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')
);Latest version 0.0.1 (2022-02-21):
- ReCAPTCHAProvider
- ReCAPTCHA
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.
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
The MIT License
