Skip to content

Commit

Permalink
Adding React to readme (#1125)
Browse files Browse the repository at this point in the history
* Adding React to reacme

* incorrect heading bigness

* Adding link to lines where Procaptcha example react is shown
  • Loading branch information
HughParry authored May 7, 2024
1 parent ed074d8 commit 2b032f3
Showing 1 changed file with 24 additions and 0 deletions.
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

0 comments on commit 2b032f3

Please sign in to comment.