{"id":13401026,"url":"https://github.com/douglasjunior/react-recaptcha-that-works","last_synced_at":"2025-04-15T12:56:58.405Z","repository":{"id":46731861,"uuid":"146482681","full_name":"douglasjunior/react-recaptcha-that-works","owner":"douglasjunior","description":"⚛ A reCAPTCHA bridge for React that works.","archived":false,"fork":false,"pushed_at":"2023-10-23T15:13:01.000Z","size":114,"stargazers_count":16,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T12:56:38.882Z","etag":null,"topics":["hacktoberfest","kiss","react","recaptcha"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-recaptcha-that-works","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/douglasjunior.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"douglasjunior","patreon":"douglasjunior","custom":"paypal.me/douglasnassif"}},"created_at":"2018-08-28T17:28:48.000Z","updated_at":"2024-05-07T13:09:48.000Z","dependencies_parsed_at":"2022-07-26T15:32:31.065Z","dependency_job_id":"549ecd94-2be6-4524-bcfd-5660713d0acf","html_url":"https://github.com/douglasjunior/react-recaptcha-that-works","commit_stats":{"total_commits":23,"total_committers":3,"mean_commits":7.666666666666667,"dds":0.4347826086956522,"last_synced_commit":"b078ef5991fe6b7774e08a33a9aadc5049c19a23"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglasjunior%2Freact-recaptcha-that-works","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglasjunior%2Freact-recaptcha-that-works/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglasjunior%2Freact-recaptcha-that-works/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglasjunior%2Freact-recaptcha-that-works/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/douglasjunior","download_url":"https://codeload.github.com/douglasjunior/react-recaptcha-that-works/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249076545,"owners_count":21208811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","kiss","react","recaptcha"],"created_at":"2024-07-30T19:00:57.981Z","updated_at":"2025-04-15T12:56:58.314Z","avatar_url":"https://github.com/douglasjunior.png","language":"TypeScript","funding_links":["https://github.com/sponsors/douglasjunior","https://patreon.com/douglasjunior","paypal.me/douglasnassif","https://www.patreon.com/douglasjunior","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=E32BUP77SVBA2"],"categories":["Uncategorized","React [🔝](#readme)"],"sub_categories":["Uncategorized"],"readme":"# reCAPTCHA for React\n\n[![License MIT](https://img.shields.io/badge/licence-MIT-blue.svg)](https://github.com/douglasjunior/react-recaptcha-that-works/blob/master/LICENSE)\n[![npm version](https://img.shields.io/npm/v/react-recaptcha-that-works.svg)](https://www.npmjs.com/package/react-recaptcha-that-works)\n[![npm downloads](https://img.shields.io/npm/dt/react-recaptcha-that-works.svg)](#install)\n\nA reCAPTCHA library for React that works.\n\n_Looking for [React Native version](https://github.com/douglasjunior/react-native-recaptcha-that-works)?_\n\n## Install \n\n### Install the module \n\n```bash\n  yarn add react-recaptcha-that-works\n```\nOr\n```bash\n  npm i -S react-recaptcha-that-works\n```\n\n### Import the reCAPTCHA script\n\n```html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cscript src=\"https://www.google.com/recaptcha/api.js\" async defer\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        ...\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Usage\n\n### I'm not a robot\n\n```jsx\nimport React, { Component } from 'react';\n\nimport Recaptcha from 'react-recaptcha-that-works';\n\nclass App extends Component {\n\n    send = () =\u003e {\n        console.log('send!', this.state.token);\n    }\n\n    onVerify = token =\u003e {\n        console.log('success!', token);\n        this.setState({ token });\n    }\n\n    onExpire = () =\u003e {\n        console.warn('expired!');\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cinput type=\"text\" placeholder=\"Username\" /\u003e\n                \u003cinput type=\"password\" placeholder=\"Password\" /\u003e\n                \u003cRecaptcha\n                    siteKey=\"\u003cyour-recaptcha-public-key\u003e\"\n                    onVerify={this.onVerify}\n                    onExpire={this.onExpire}\n                /\u003e\n                \u003cbutton onClick={this.send}\u003eSend\u003c/button\u003e\n            \u003c/div\u003e\n        )\n    }\n}\n```\n\n### Invisible\n\n```jsx\nimport React, { Component } from 'react';\n\nimport Recaptcha from 'react-recaptcha-that-works';\n\nclass App extends Component {\n\n    send = () =\u003e {\n        console.log('send!');\n        this.recaptcha.execute();\n    }\n\n    onVerify = token =\u003e {\n        console.log('success!', token);\n    }\n\n    onExpire = () =\u003e {\n        console.warn('expired!');\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cinput type=\"text\" placeholder=\"Username\" /\u003e\n                \u003cinput type=\"password\" placeholder=\"Password\" /\u003e\n                \u003cRecaptcha\n                    ref={ref = this.recaptcha = ref}\n                    siteKey=\"\u003cyour-recaptcha-public-key\u003e\"\n                    onVerify={this.onVerify}\n                    onExpire={this.onExpire}\n                    size=\"invisible\"\n                /\u003e\n                \u003cbutton onClick={this.send}\u003eSend\u003c/button\u003e\n            \u003c/div\u003e\n        )\n    }\n}\n```\n\n### TypeScript\n\n```tsx\nimport React, { useRef } from 'react';\n\nimport Recaptcha, { RecaptchaRef } from \"react-recaptcha-that-works\";\n\n// ...\n\nexport const Component: React.FC = () =\u003e {\n    const recaptcha = useRef\u003cRecaptchaRef\u003e(null);\n\n    const send = () =\u003e {\n        console.log('send!');\n        recaptcha.current?.execute();\n    };\n\n    const onVerify = (token: string) =\u003e {\n        console.log('success!', token);\n    };\n\n    const onExpire = () =\u003e {\n        console.warn('expired!');\n    }\n\n    return (\n        \u003cdiv\u003e\n            \u003cRecaptcha\n                ref={recaptcha}\n                siteKey=\"\u003cyour-recaptcha-public-key\u003e\"\n                onVerify={onVerify}\n                onExpire={onExpire}\n                size=\"invisible\"\n            /\u003e\n            \u003cbutton onClick={send}\u003e\n                Send\n            \u003c/button\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n\u003cbr /\u003e\n\nFor more details, see the [Sample Project](https://github.com/douglasjunior/react-recaptcha-that-works/blob/master/src/App.tsx).\n\n## Props\n\n|Name|Value|Default|Description|\n|-|-|-|-|\n|siteKey|||Your sitekey.|\n|size|`'invisible'`, `'normal'` or `'compact'`|`'normal'`|The size of the widget.|\n|theme|`'dark'` or `'light'`|`'light'`|The color theme of the widget.|\n|onLoad|`function()`||A callback function, executed when the reCAPTCHA is ready to use.|\n|onVerify|`function(token)`||A callback function, executed when the user submits a successful response. The reCAPTCHA response token is passed to your callback.|\n|onExpire|`function()`||A callback function, executed when the reCAPTCHA response expires and the user needs to re-verify.|\n|onError|`function()`||A callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.|\n|onClose|`function()`||(Experimental) A callback function, executed when the challenge window is closed.|\n\n## React Ref Methods\n\n|Name|Type|Description|\n|-|-|-|\n|execute|`function`|Executes the challenge in \"invisible\" mode.|\n|reset|`function`|Resets the reCAPTCHA state.|\n\n## reCAPTCHA v2 docs\n\n- [I'm not a robot](https://developers.google.com/recaptcha/docs/display)\n- [Invisible](https://developers.google.com/recaptcha/docs/invisible)\n\n## Contribute\n\nNew features, bug fixes and improvements are welcome! For questions and suggestions, use the [issues](https://github.com/douglasjunior/react-recaptcha-that-works/issues).\n\n\u003ca href=\"https://www.patreon.com/douglasjunior\"\u003e\u003cimg src=\"http://i.imgur.com/xEO164Z.png\" alt=\"Become a Patron!\" width=\"200\" /\u003e\u003c/a\u003e\n[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=E32BUP77SVBA2)\n\n## License\n\n```\nThe MIT License (MIT)\n\nCopyright (c) 2018 Douglas Nassif Roma Junior\n```\n\nSee the full [license file](https://github.com/douglasjunior/react-recaptcha-that-works/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdouglasjunior%2Freact-recaptcha-that-works","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdouglasjunior%2Freact-recaptcha-that-works","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdouglasjunior%2Freact-recaptcha-that-works/lists"}