Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding React to readme #1125

Merged
merged 4 commits into from
May 7, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <Procaptcha config={config} />
}

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
Expand Down
Loading