diff --git a/README.md b/README.md index 2640781008..7a8c9a1260 100644 --- a/README.md +++ b/README.md @@ -159,6 +159,30 @@ data contains the following fields: | user | string | The user's account address | | blockNumber | number | The block number of the captcha challenge. This is used to verify that the contacted provider was randomly selected on-chain. | +### Add the Procaptcha Widget to your site with React + +You must import Procaptcha, define a config with ProcaptchaConfigSchema, optionally define callbacks, and render via the Procaptcha component. A minimal example would be as follows: + +```javascript +import { Procaptcha } from '@prosopo/procaptcha-react' +import { ProcaptchaConfigSchema } from '@prosopo/types' + +const MyApp = () => { + const config = ProcaptchaConfigSchema.parse({ + account: { + address: 'YOUR_SITEKEY', + }, + // Other config options, see demos/client-example for more details + }) + + return +} + +export default MyApp +``` + +Further example usage can be seen in [demos/client-example](https://github.com/prosopo/captcha/blob/main/demos/client-example/src/App.tsx#L220C1-L223C43) + ### Verify the User `procaptcha-response` data Server Side By adding the client side code, you were able to render a Procaptcha widget that identified if users were real people or