{"id":20780156,"url":"https://github.com/le0developer/react-turnstile","last_synced_at":"2025-05-15T20:04:59.253Z","repository":{"id":60604005,"uuid":"543290166","full_name":"Le0Developer/react-turnstile","owner":"Le0Developer","description":"A very simple React library for Cloudflare Turnstile.","archived":false,"fork":false,"pushed_at":"2025-01-17T13:06:49.000Z","size":108,"stargazers_count":130,"open_issues_count":2,"forks_count":16,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-10T02:48:08.691Z","etag":null,"topics":["cloudflare-turnstile","react","turnstile"],"latest_commit_sha":null,"homepage":"https://turnstile-demo.pages.dev/","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/Le0Developer.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-29T19:36:36.000Z","updated_at":"2025-04-27T16:36:54.000Z","dependencies_parsed_at":"2025-02-24T10:20:32.879Z","dependency_job_id":null,"html_url":"https://github.com/Le0Developer/react-turnstile","commit_stats":{"total_commits":55,"total_committers":4,"mean_commits":13.75,"dds":"0.054545454545454564","last_synced_commit":"bba3dc6b09e73e36e1853ce8727779439e236c25"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Le0Developer%2Freact-turnstile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Le0Developer%2Freact-turnstile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Le0Developer%2Freact-turnstile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Le0Developer%2Freact-turnstile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Le0Developer","download_url":"https://codeload.github.com/Le0Developer/react-turnstile/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414499,"owners_count":22067272,"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":["cloudflare-turnstile","react","turnstile"],"created_at":"2024-11-17T13:32:35.098Z","updated_at":"2025-05-15T20:04:51.722Z","avatar_url":"https://github.com/Le0Developer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-turnstile\n\nA very simple React library for [Cloudflare Turnstile](https://challenges.cloudflare.com).\n\n## Installation\n\n```sh\nnpm i react-turnstile\n```\n\n## Usage\n\n```jsx\nimport Turnstile, { useTurnstile } from \"react-turnstile\";\n\n// ...\n\nfunction TurnstileWidget() {\n  const turnstile = useTurnstile();\n  return (\n    \u003cTurnstile\n      sitekey=\"1x00000000000000000000AA\"\n      onVerify={(token) =\u003e {\n        fetch(\"/login\", {\n          method: \"POST\",\n          body: JSON.stringify({ token }),\n        }).then((response) =\u003e {\n          if (!response.ok) turnstile.reset();\n        });\n      }}\n    /\u003e\n  );\n}\n```\n\nTurnstile tokens expire after 5 minutes, to automatically reset the challenge once they expire,\nset the `refreshExpired` prop to `'auto'` or reset the widget yourself using the `onExpire` callback.\n\n### Reducing Layout Shift\n\nThe turnstile iframe initially loads as invisible before becoming visible and\nexpanding to the expected widget size.\n\nThis causes Layout Shift and reduces your Cumulative Layout Shift score and UX.\n\nThis can be fixed with the `fixedSize={true}` option, which will force the\nwrapper div to be the specific size of turnstile.\n\n### Bound Turnstile Object\n\nThe Bound Turnstile Object is given as argument to all callbacks and allows you\nto call certain `window.turnstile` functions without having to store the `widgetId`\nyourself.\n\n```js\nfunction Component() {\n  return (\n    \u003cTurnstile\n      execution=\"execute\"\n      onLoad={(widgetId, bound) =\u003e {\n        // before:\n        window.turnstile.execute(widgetId);\n        // now:\n        bound.execute();\n      }}\n    /\u003e\n  );\n}\n```\n\n## Documentation\n\nTurnstile takes the following arguments:\n\n| name              | type    | description                                          |\n| ----------------- | ------- | ---------------------------------------------------- |\n| sitekey           | string  | sitekey of your website (REQUIRED)                   |\n| action            | string  | -                                                    |\n| cData             | string  | -                                                    |\n| theme             | string  | one of \"light\", \"dark\", \"auto\"                       |\n| language          | string  | override the language used by turnstile              |\n| tabIndex          | number  | -                                                    |\n| responseField     | boolean | controls generation of `\u003cinput /\u003e` element           |\n| responseFieldName | string  | changes the name of `\u003cinput /\u003e` element              |\n| size              | string  | one of \"normal\", \"compact\", \"flexible\"               |\n| fixedSize         | boolean | fix the size of the `\u003cdiv /\u003e` to reduce layout shift |\n| retry             | string  | one of \"auto\", \"never\"                               |\n| retryInterval     | number  | interval of retries in ms                            |\n| refreshExpired    | string  | one of \"auto\", \"manual\", \"never\"                     |\n| appearance        | string  | one of \"always\", \"execute\", \"interaction-only\"       |\n| execution         | string  | one of \"render\", \"execute\"                           |\n| id                | string  | id of the div                                        |\n| userRef           | Ref     | custom react ref for the div                         |\n| className         | string  | passed to the div                                    |\n| style             | object  | passed to the div                                    |\n\nAnd the following callbacks:\n\n| name                | arguments                   | description                                         |\n| ------------------- | --------------------------- | --------------------------------------------------- |\n| onVerify            | token                       | called when challenge is passed                     |\n| onSuccess           | token, preClearanceObtained | called when challenge is passed                     |\n| onLoad              | widgetId                    | called when the widget is loaded                    |\n| onError             | error                       | called when an error occurs                         |\n| onExpire            | -                           | called when the token expires                       |\n| onTimeout           | token                       | called when the challenge expires                   |\n| onAfterInteractive  | -                           | called when the challenge becomes interactive       |\n| onBeforeInteractive | -                           | called when the challenge no longer is interactive  |\n| onUnsupported       | -                           | called when the browser is unsupported by Turnstile |\n\nThe callbacks also take an additional `BoundTurnstileObject` which exposes\ncertain functions of `window.turnstile` which are already bound to the\ncurrent widget, so you don't need track the `widgetId` yourself.\n\nFor more details on what each argument does, see the [Cloudflare Documentation](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fle0developer%2Freact-turnstile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fle0developer%2Freact-turnstile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fle0developer%2Freact-turnstile/lists"}