<p>React Captcha is a form validation component based on Recaptcha.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { Captcha } <span class="hljs-keyword">from</span> <span class="hljs-string">'primereact/captcha'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>Captcha is used with a siteKey and a callback to verify the response.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Captcha</span> <span class="hljs-attr">siteKey</span>=<span class="hljs-string">"YOUR_SITE_KEY"</span> <span class="hljs-attr">onResponse</span>=<span class="hljs-string">{showResponse}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Captcha</span>&gt;</span>
</code></pre>
<h3 id="verification">Verification</h3>
<p>In order to ensure if a response token is valid, verification against recaptcha api needs to be done at backend. <a target="_blank" href="https://developers.google.com/recaptcha/docs/verify">Read more</a> at official documentation.</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> showResponse = <span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> {
<span class="hljs-comment">//call to a backend to verify against recaptcha with private key</span>
}
</code></pre>
<p>In addition, include the captcha widget resource to your page.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.google.com/recaptcha/api.js?render=explicit"</span> <span class="hljs-attr">async</span> <span class="hljs-attr">defer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<h3 id="theming">Theming</h3>
<p>Captcha supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primereact/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/captcha">Captcha</a> showcase for demos and documentation.</p>


React Captcha is a form validation component based on Recaptcha.

### Setup

Refer to PrimeReact [setup documentation](https://primefaces.org/primereact/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import { Captcha } from 'primereact/captcha';
``` 

### Getting Started

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

```html
<Captcha siteKey="YOUR_SITE_KEY" onResponse={showResponse}></Captcha>
```

### Verification

In order to ensure if a response token is valid, verification against recaptcha api needs to be done at backend. [Read more](https://developers.google.com/recaptcha/docs/verify) at official documentation.

```js
const showResponse = (response) => {
//call to a backend to verify against recaptcha with private key
}
```

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

```html
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
```

### Theming

Captcha supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primereact/showcase/#/theming) tool.

### Resources

Visit the PrimeReact [Captcha](https://primefaces.org/primereact/showcase/#/captcha) showcase for demos and documentation.
