DEV Community

loading...
Cover image for React Captcha

React Captcha

PrimeTek
PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use contact@primetek.com.tr to contact us.
・1 min read

React Captcha is a form validation component based on Recaptcha.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Captcha } from 'primereact/captcha';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Captcha is used with a siteKey and a callback to verify the response.

<Captcha siteKey="YOUR_SITE_KEY" onResponse={showResponse}></Captcha>
Enter fullscreen mode Exit fullscreen mode

Verification

In order to ensure if a response token is valid, verification against recaptcha api needs to be done at backend. Read more at official documentation.

const showResponse = (response) => {
//call to a backend to verify against recaptcha with private key
}
Enter fullscreen mode Exit fullscreen mode

In addition, include the captcha widget resource to your page.

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
Enter fullscreen mode Exit fullscreen mode

Theming

Captcha supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Captcha showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app