{"_id":"@aoexl/sign-react","_rev":"2-3c971997e3531b27a93db9e3e1ef61a5","name":"@aoexl/sign-react","dist-tags":{"latest":"1.2.1"},"versions":{"1.0.0":{"name":"@aoexl/sign-react","version":"1.0.0","license":"UNLICENSED","_id":"@aoexl/sign-react@1.0.0","maintainers":[{"name":"aoexlpdf","email":"rails2track@gmail.com"}],"dist":{"shasum":"6becf421cc6bb4f4e022277fb5f28843e670cb18","tarball":"https://registry.npmjs.org/@aoexl/sign-react/-/sign-react-1.0.0.tgz","fileCount":7,"integrity":"sha512-jgy5z3qUaKFZTJXDakw8uNzvBUJnXHCn9oXFUdt/yHLPMH3/pSVB7mVvUKRjJQggq0norQjEik0WG3zSm6z/Ng==","signatures":[{"sig":"MEUCIQDeG1B8evQYuM5TGclI9deXbLZ4zzx+2D+MflG98EClDAIgX9QQQbA4lWCfES8B4EEjVN06oF5S7MoD+WPopqUKEso=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37207},"main":"dist/index.cjs","types":"src/index.d.ts","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"d6527e2b01d9ec3abe63c9d11ce665cfcad5bb6e","private":false,"scripts":{"build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"aoexlpdf","email":"rails2track@gmail.com"},"_npmVersion":"11.11.1","description":"React integration for Aoexl Sign PDF eSignature SDK","directories":{},"_nodeVersion":"25.8.2","dependencies":{"@aoexl/sign":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","@vitejs/plugin-react":"^4.3.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/sign-react_1.0.0_1775788733449_0.8490286435041607","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@aoexl/sign-react","version":"1.2.1","description":"React integration for Aoexl Sign PDF eSignature SDK","main":"dist/index.cjs","module":"dist/index.js","types":"src/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"vite build","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"@aoexl/sign":"^1.2.1"},"devDependencies":{"@vitejs/plugin-react":"^4.3.1","vite":"^5.4.2"},"license":"UNLICENSED","private":false,"publishConfig":{"access":"public"},"_id":"@aoexl/sign-react@1.2.1","gitHead":"e82ea1aaf9fd6dd32a4a93cde388bf27d13779a9","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-0fwGtJIMRWTF/6Hcrq8eDrxKWjPO2MLsTsqnPc7QpOQeWeWMwi6OYJZZttc5rPhSb9z8iyQ7lT9ypUlk7n2pnA==","shasum":"809d879ce643556f4258beb7ee94d49fff33ed4d","tarball":"https://registry.npmjs.org/@aoexl/sign-react/-/sign-react-1.2.1.tgz","fileCount":7,"unpackedSize":39203,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCFUMxtIOobLUh9tf3bKRa7ubkvILqEu2CaoZVRyXT0iwIhAM/oA3pZz3lMVPJvcSoZHo1v6DdepmYY1KRvXJaUjbHd"}]},"_npmUser":{"name":"aoexlpdf","email":"rails2track@gmail.com"},"directories":{},"maintainers":[{"name":"aoexlpdf","email":"rails2track@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sign-react_1.2.1_1776186732025_0.5022567505192976"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T02:38:53.347Z","modified":"2026-04-14T17:12:12.624Z","1.0.0":"2026-04-10T02:38:53.579Z","1.2.1":"2026-04-14T17:12:12.174Z"},"license":"UNLICENSED","description":"React integration for Aoexl Sign PDF eSignature SDK","maintainers":[{"name":"aoexlpdf","email":"rails2track@gmail.com"}],"readme":"# @aoexl/sign-react\n\nReact integration for the [Aoexl Sign](https://aoexl.com) PDF eSignature SDK.\n\nProvides a drop-in `<AoexlSign>` component and two hooks — `useAoexlSign` (headless) and `usePdfExport` — for building fully custom signing flows.\n\n---\n\n## Installation\n\n```bash\nnpm install @aoexl/sign-react @aoexl/sign\n# peer deps\nnpm install react react-dom\n```\n\n---\n\n## Quick start — component\n\n```tsx\nimport { AoexlSign } from '@aoexl/sign-react'\n\nexport default function SignPage() {\n  return (\n    <AoexlSign\n      licenseKey=\"pk_live_xxxxxxxxxxxx\"\n      pdfUrl=\"https://your-server.com/contract.pdf\"\n      mode=\"sign\"\n      signers={[{ name: 'Jane Doe', email: 'jane@example.com', role: 'signer' }]}\n      onComplete={({ signedPdfBytes, fields }) => {\n        console.log('Signing complete', fields)\n        // upload signedPdfBytes to your server\n      }}\n      onError={(err) => console.error('Signing error', err)}\n      style={{ height: 700 }}\n    />\n  )\n}\n```\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `licenseKey` | `string` | — | **Required.** Your Aoexl license key. |\n| `pdfUrl` | `string` | — | URL of the PDF to load. |\n| `pdfData` | `Uint8Array \\| Blob \\| string` | — | Raw PDF bytes or data-URL (alternative to `pdfUrl`). |\n| `mode` | `'prepare' \\| 'sign' \\| 'view' \\| 'full'` | `'sign'` | Viewer mode. |\n| `signers` | `Signer[]` | `[]` | Signer definitions (`id`, `name`, `email`, `role`). |\n| `fields` | `Field[]` | `[]` | Pre-placed field definitions. |\n| `theme` | `Theme` | — | Color and layout overrides. |\n| `ui` | `UIConfig` | — | Hide buttons or tabs using `hide: []`. |\n| `config` | `ViewerConfig` | — | Behavioural flags like `autoJumpNextSign`. |\n| `onComplete` | `(result: CompleteResult) => void` | — | Fired when signing is finished. |\n| `onSave` | `(result: CompleteResult) => void` | — | Fired on every manual save/download. |\n| `onDocumentLoaded` | `({ pageCount }) => void` | — | Fired after the PDF is parsed. |\n| `onAllSigned` | `({ fields }) => void` | — | Fired when the last required field is filled. |\n\n### API Reference (Ref)\n\nWhen using a `ref` with `<AoexlSign>` or the `destroy` method from `useAoexlSign`, you have access to:\n\n- `savePdf(options?)`: Trigger a browser download.\n- `getPdfBytes()`: Returns the final PDF as a `Uint8Array`.\n- `flattenPdf()`: Returns a flattened version of the PDF.\n- `setScale(number)`: Change zoom level dynamically.\n- `zoomIn()` / `zoomOut()`: Standard zoom controls.\n- `fitWidth()` / `fitPage()`: Responsive scaling tools.\n\n---\n\n## Headless hook — `useAoexlSign`\n\nUse this when you need full control over the container or want to show your own loading UI.\n\n```tsx\nimport { useAoexlSign } from '@aoexl/sign-react'\n\nexport default function CustomSignPage() {\n  const { ref, status, error, fields, destroy } = useAoexlSign({\n    licenseKey: 'pk_live_xxxxxxxxxxxx',\n    pdfUrl: 'https://your-server.com/contract.pdf',\n    mode: 'sign',\n    signers: [{ name: 'Jane Doe', email: 'jane@example.com' }],\n    onComplete: ({ signedPdfBytes }) => {\n      // handle completion\n    },\n    onError: (err) => console.error(err),\n  })\n\n  return (\n    <div>\n      {status === 'loading' && <p>Loading PDF viewer…</p>}\n      {status === 'error'   && <p style={{ color: 'red' }}>{error}</p>}\n      <div\n        ref={ref}\n        style={{ height: 700, border: '1px solid #e2e8f0', borderRadius: 8 }}\n      />\n    </div>\n  )\n}\n```\n\n### Return values\n\n| Value | Type | Description |\n|-------|------|-------------|\n| `ref` | `RefObject<HTMLDivElement>` | Attach to your container element. |\n| `status` | `'idle' \\| 'loading' \\| 'ready' \\| 'error'` | Current lifecycle state. |\n| `error` | `string \\| null` | Error message when `status === 'error'`. |\n| `fields` | `Field[]` | Current field array (updated after `onComplete`). |\n| `destroy` | `() => void` | Manually unmount the viewer. |\n\n---\n\n## `usePdfExport`\n\nDownload a signed PDF to the user's device.\n\n```tsx\nimport { useAoexlSign, usePdfExport } from '@aoexl/sign-react'\n\nexport default function SignAndDownload() {\n  const { download, downloading } = usePdfExport()\n\n  const { ref } = useAoexlSign({\n    licenseKey: 'pk_live_xxxxxxxxxxxx',\n    pdfUrl: 'https://your-server.com/contract.pdf',\n    onComplete: ({ signedPdfBytes }) => {\n      if (signedPdfBytes) {\n        download(signedPdfBytes, 'signed-contract.pdf')\n      }\n    },\n  })\n\n  return (\n    <>\n      {downloading && <p>Preparing download…</p>}\n      <div ref={ref} style={{ height: 700 }} />\n    </>\n  )\n}\n```\n\n### Return values\n\n| Value | Type | Description |\n|-------|------|-------------|\n| `download` | `(bytes, filename?) => void` | Trigger a browser file download. |\n| `toBase64` | `(bytes) => string` | Convert bytes to a base64 string. |\n| `toBlob` | `(bytes) => Blob` | Wrap bytes in a PDF Blob. |\n| `downloading` | `boolean` | True while the file is being prepared. |\n| `error` | `string \\| null` | Set if the download threw. |\n\n---\n\n## TypeScript\n\nAll types are exported from the package entry point:\n\n```ts\nimport type {\n  UseAoexlSignOptions,\n  UseAoexlSignResult,\n  UsePdfExportResult,\n  Field,\n  Signer,\n  CompleteResult,\n  Theme,\n} from '@aoexl/sign-react'\n```\n\n---\n\n## Building\n\n```bash\nnpm run build   # outputs dist/index.js (ESM) + dist/index.cjs (CJS)\n```\n\n---\n\n## License\n\nUNLICENSED — contact [Aoexl](https://aoexl.com) for a commercial license.\n","readmeFilename":"README.md"}