# Trustcaptcha React-Library

The React library helps you to integrate Trustcaptcha into your React frontend applications.


## What is Trustcaptcha?

A captcha solution that protects you from bot attacks and puts a special focus on user experience and data protection.

You can find more information on your website: [www.trustcaptcha.com](https://www.trustcaptcha.com).


## How does the library work?

Detailed instructions and examples for using the library can be found in our [documentation](https://docs.trustcaptcha.com/en/documentation/frontend/integration?frontend=react).


## Short example

Here you can see a short code example of a possible integration. Please refer to our provided [documentation](https://docs.trustcaptcha.com/en/documentation/frontend/integration?frontend=react) for complete and up-to-date integration instructions.

1. Installing the library

``npm i @trustcaptcha/trustcaptcha-react``

2. Use the Trustcaptcha component in any form element

```
import {TrustcaptchaComponent, defineCustomElements} from "@trustcaptcha/trustcaptcha-react";

defineCustomElements()

function App() {

  function handleSuccess(verificationToken) {
    // handle success
  }

  function handleError(error) {
    // handle error
  }

  return (
    <div>
      <form>

        <!-- your input fields -->

        <TrustcaptchaComponent
          sitekey="cc2e2d5e-d1ef-4a7f-a7bd-dec5b37df47a"
          onCaptchaSolved={event => handleSuccess(event.detail)}
          onCaptchaFailed={event => handleError(event.detail)}
        ></TrustcaptchaComponent>

        <!-- further input fields / submit button -->

      </form>
    </div>
  );
}

export default App;
```

## Ideas and support

If you have any ideas, suggestions, or need support, please [contact us](https://www.trustcaptcha.com/en/contact-us).