### Local Development Setup for react-hcaptcha

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Use these commands to set up a local development environment. Ensure you have npm installed and follow the provided steps to access the example application.

```bash
sudo echo "127.0.0.1 fakelocal.com" >> /private/etc/hosts
npm start -- --disable-host-check
```

--------------------------------

### Install React hCaptcha

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Install the library via npm. This is the first step to integrating hCaptcha into your React application.

```bash
npm install @hcaptcha/react-hcaptcha --save
```

--------------------------------

### execute()

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Programmatically trigger a challenge request. This method can also be run asynchronously and returns a promise with the token and eKey when the challenge is completed. It accepts an optional object payload for enterprise features like rqdata.

```APIDOC
## execute()

### Description
Programmatically trigger a challenge request. Additionally, this method can be run asynchronously and returns a promise with the `token` and `eKey` when the challenge is completed. It can also accept an object payload for enterprise features.

### Method
`execute(payload?: object)`

### Parameters
#### Request Body
- **payload** (object) - Optional - An object containing data to be passed to the underlying JS API, such as `rqdata` for Enterprise features.

### Request Example
```javascript
const executePayload = {};
if (rqdata) {
  executePayload['rqdata'] = rqdata;
}
captchaRef.current?.execute(executePayload);
```

### Response
#### Success Response
- **token** (string) - The hCaptcha response token.
- **eKey** (string) - The hCaptcha session ID.

#### Response Example
(Asynchronous execution returns a Promise)
```javascript
captchaRef.current?.execute().then(({ token, eKey }) => {
  console.log('Token:', token);
  console.log('eKey:', eKey);
});
```
```

--------------------------------

### setData()

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Used for enterprise features. Refer to enterprise documentation for details.

```APIDOC
## setData()

### Description
See enterprise docs.

### Method
`setData()`
```

--------------------------------

### getRespKey()

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Retrieves the current challenge reference ID.

```APIDOC
## getRespKey()

### Description
Get the current challenge reference ID.

### Method
`getRespKey()`

### Response
- **responseKey** (string) - The current challenge reference ID.
```

--------------------------------

### Standard hCaptcha Implementation

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Use the HCaptcha component directly within your form. Ensure you provide your sitekey and handle the verification callback.

```javascript
import HCaptcha from '@hcaptcha/react-hcaptcha';

<FormComponent>
    <HCaptcha
      sitekey="your-sitekey"
      onVerify={(token,ekey) => handleVerificationSuccess(token, ekey)}
    />
</FormComponent>
```

--------------------------------

### getResponse()

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Retrieves the current challenge response token from a completed challenge.

```APIDOC
## getResponse()

### Description
Get the current challenge response token from a completed challenge.

### Method
`getResponse()`

### Response
- **responseToken** (string) - The current challenge response token.
```

--------------------------------

### Provider/Hook Pattern for hCaptcha

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Utilize the `HCaptchaProvider` and `useHCaptcha` hook for a more integrated state management approach. This pattern simplifies access to hCaptcha's ready state, token, and execution functions.

```javascript
import { HCaptchaProvider, useHCaptcha } from '@hcaptcha/react-hcaptcha';

function App() {
  return (
    <HCaptchaProvider sitekey="your-sitekey">
      <Form />
    </HCaptchaProvider>
  );
}

function Form() {
  const { ready, token, executeInstance } = useHCaptcha();

  const onSubmit = async () => {
    const response = await executeInstance();
    console.log("Token:", response);
  };

  return <button onClick={onSubmit} disabled={!ready}>Submit</button>;
}
```

--------------------------------

### resetCaptcha()

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Resets the current hCaptcha challenge.

```APIDOC
## resetCaptcha()

### Description
Reset the current challenge.

### Method
`resetCaptcha()`
```

--------------------------------

### Execute hCaptcha with Custom Data

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Pass an object to the execute method to include custom data, such as `rqdata`, for Enterprise features. Ensure the `rqdata` is conditionally added to the payload.

```javascript
const {sitekey, rqdata} = props;
const captchaRef = React.useRef<HCaptcha>(null);

const onLoad = () => {
  const executePayload = {};
  if (rqdata) {
    executePayload['rqdata'] = rqdata;
  }
  captchaRef.current?.execute(executePayload);
};

return <HCaptcha ref={captchaRef} onLoad={onLoad} sitekey={sitekey} {...props} />;
```

--------------------------------

### Programmatic hCaptcha Execution

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

Control hCaptcha execution programmatically using `useRef` and the `onLoad` callback. This allows you to trigger hCaptcha verification via its client API after it's ready.

```javascript
import { useEffect, useRef, useState } from "react";
import HCaptcha from "@hcaptcha/react-hcaptcha";

export default function Form() {
  const [token, setToken] = useState(null);
  const captchaRef = useRef(null);

  const onLoad = () => {
    // this reaches out to the hCaptcha JS API and runs the
    // execute function on it. you can use other functions as
    // documented here:
    // https://docs.hcaptcha.com/configuration#jsapi
    captchaRef.current.execute();
  };

  useEffect(() => {

    if (token)
      console.log(`hCaptcha Token: ${token}`);

  }, [token]);

  return (
    <form>
      <HCaptcha
        sitekey="your-sitekey"
        onLoad={onLoad}
        onVerify={setToken}
        ref={captchaRef}
      />
    </form>
  );
}
```

--------------------------------

### TypeScript hCaptcha Re-export

Source: https://github.com/hcaptcha/react-hcaptcha/blob/master/README.md

If you need to rename the hCaptcha component in TypeScript, create a utility file to import and re-export it as the default.

```typescript
// utils/captcha.ts
import HCaptcha from '@hcaptcha/react-hcaptcha';
export default HCaptcha;

// MyFormComponent.tsx
import { default as RenamedCaptcha } from '../utils/captcha';
<FormComponent>
  <RenamedCaptcha sitekey="your-sitekey" />
</FormComponent>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.