{"_id":"@007captcha/react","name":"@007captcha/react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@007captcha/react","version":"0.1.0","description":"007captcha React component wrapper","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"peerDependencies":{"@007captcha/client":">=0.1.0","react":">=18.0.0"},"devDependencies":{"@types/react":"^19.0.0","react":"^19.0.0","@007captcha/client":"0.1.0"},"license":"MIT","scripts":{"build":"tsup src/index.ts --format esm,cjs --dts --clean --external react --external @007captcha/client"},"_id":"@007captcha/react@0.1.0","_integrity":"sha512-uS+F9rA4EaNSUm5Xzdp/fu1Qx+ZZlC7OFZ8iKH8mM6FK+3EWk4VBtgHtz4Bdq/sHV2fi8Mx9xczBE8lFHVJDJQ==","_resolved":"/tmp/29e304f09a13ede4c81ade2de6f6580a/007captcha-react-0.1.0.tgz","_from":"file:007captcha-react-0.1.0.tgz","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-uS+F9rA4EaNSUm5Xzdp/fu1Qx+ZZlC7OFZ8iKH8mM6FK+3EWk4VBtgHtz4Bdq/sHV2fi8Mx9xczBE8lFHVJDJQ==","shasum":"2d4f44a389a397685da92b06af100553e809e06d","tarball":"https://registry.npmjs.org/@007captcha/react/-/react-0.1.0.tgz","fileCount":7,"unpackedSize":8307,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD4Hk+wzIRaNMDyQ1RGMaPozv+ONRwAKTo77pryLdvt1QIhAIrvUb2lljsNoyBES0uuuy7775z/RKHxgjTCpZgw6jdu"}]},"_npmUser":{"name":"mutkuoz","email":"thejupyter@gmail.com"},"directories":{},"maintainers":[{"name":"mutkuoz","email":"thejupyter@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.0_1774748057342_0.37578717528415084"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-29T01:34:17.256Z","0.1.0":"2026-03-29T01:34:17.487Z","modified":"2026-03-29T01:34:17.723Z"},"maintainers":[{"name":"mutkuoz","email":"thejupyter@gmail.com"}],"description":"007captcha React component wrapper","license":"MIT","readme":"<p align=\"center\">\n  <img src=\"../../007-logo.png\" alt=\"007captcha\" width=\"120\">\n</p>\n\n<h1 align=\"center\">@007captcha/react</h1>\n\n<p align=\"center\">\n  React component for 007captcha.\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@007captcha/react\"><img src=\"https://img.shields.io/npm/v/@007captcha/react?color=111827\" alt=\"npm\"></a>\n  <a href=\"https://github.com/mutkuoz/007captcha/blob/main/LICENSE\"><img src=\"https://img.shields.io/github/license/mutkuoz/007captcha?color=111827\" alt=\"license\"></a>\n</p>\n\n---\n\n## Installation\n\n```bash\npnpm add @007captcha/client @007captcha/react\n```\n\nBoth packages are required &mdash; `@007captcha/client` is a peer dependency.\n\n## Usage\n\n```tsx\nimport { OOSevenCaptcha } from '@007captcha/react';\n\nfunction LoginForm() {\n  const handleSuccess = (token: string) => {\n    fetch('/verify', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ token }),\n    });\n  };\n\n  return (\n    <form>\n      <OOSevenCaptcha\n        siteKey=\"your-secret-key\"\n        method=\"ball\"\n        serverUrl={window.location.origin}\n        onSuccess={handleSuccess}\n      />\n      <button type=\"submit\">Log in</button>\n    </form>\n  );\n}\n```\n\n### With Dark Theme\n\n```tsx\n<OOSevenCaptcha\n  siteKey=\"your-secret-key\"\n  serverUrl=\"/api\"\n  theme=\"dark\"\n  onSuccess={handleSuccess}\n  onFailure={(err) => console.error(err.message)}\n/>\n```\n\n### Random Method\n\n```tsx\n<OOSevenCaptcha\n  siteKey=\"your-secret-key\"\n  serverUrl={window.location.origin}\n  method=\"random\"\n  onSuccess={handleSuccess}\n/>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `siteKey` | `string` | *required* | Secret key shared with server |\n| `serverUrl` | `string` | *required* | Base URL for captcha server endpoints |\n| `method` | `'ball' \\| 'shape' \\| 'maze' \\| 'random'` | `'random'` | Challenge method |\n| `theme` | `'light' \\| 'dark' \\| 'auto'` | `'light'` | Color theme |\n| `timeLimit` | `number` | *varies* | Override time limit in ms |\n| `className` | `string` | &mdash; | CSS class applied to the wrapper `<div>` |\n| `onSuccess` | `(token: string) => void` | &mdash; | Called with signed token on pass |\n| `onFailure` | `(error: Error) => void` | &mdash; | Called on challenge failure |\n| `onExpired` | `() => void` | &mdash; | Called when a token expires |\n\nThe component automatically handles mounting, cleanup, and re-initialization when `siteKey`, `method`, `theme`, or `timeLimit` change.\n\n## Requirements\n\n- React 18+\n- A running `@007captcha/server` instance. See the [server package](../server) for setup.\n\n## License\n\n[MIT](../../LICENSE)\n","readmeFilename":"README.md","_rev":"1-7fb57eeb8693110284ecefd6d3fd7e93"}