{"_id":"@docuseal/signature-maker-js","_rev":"1-dcbd475fbb0aa817d015b12b3d4392ea","name":"@docuseal/signature-maker-js","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@docuseal/signature-maker-js","version":"1.0.0","keywords":["js-signature","signature","signature-drawing"],"author":{"name":"Alex Turchyn","email":"alex@docuseal.co"},"license":"MIT","_id":"@docuseal/signature-maker-js@1.0.0","maintainers":[{"name":"petem","email":"pete@docuseal.co"},{"name":"alex.turchyn","email":"alex@docuseal.co"}],"homepage":"https://github.com/docusealco/signature-maker-js#readme","bugs":{"url":"https://github.com/docusealco/signature-maker-js/issues"},"dist":{"shasum":"fce83768a3dd7670222458875c1711d2c2ffdc48","tarball":"https://registry.npmjs.org/@docuseal/signature-maker-js/-/signature-maker-js-1.0.0.tgz","fileCount":5,"integrity":"sha512-IKSyGFjrcG8R2nSl4BerWoscrxtS1DM2TPgds0wSO69pbU1axJhO9SpY+YY1aALar6WXw0fU/69+BPbqQRm+tA==","signatures":[{"sig":"MEYCIQC7UZfrdAXKZAjoB1Nb1ZRsC8oXufZTUPpz3kmKB/6w7AIhAKIMum5yxEp28qF5diTDYxwcy1kN0k9YTdSE1Qln7FZ/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93802},"main":"dist/index.cjs.js","module":"dist/index.esm.js","gitHead":"771227acb8b7713e76e3fa85c1544191d4464d85","scripts":{"build":"node esbuild.config.js"},"_npmUser":{"name":"alex.turchyn","email":"alex@docuseal.co"},"repository":{"url":"git+https://github.com/docusealco/signature-maker-js.git","type":"git"},"_npmVersion":"10.5.0","description":"JS library for drawing signatures","directories":{},"_nodeVersion":"21.7.1","dependencies":{"signature_pad":"^5.0.3"},"_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.23.1"},"_npmOperationalInternal":{"tmp":"tmp/signature-maker-js_1.0.0_1726581337008_0.18141152586959453","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@docuseal/signature-maker-js","version":"1.0.1","description":"JS library for drawing signatures","main":"dist/index.cjs.js","module":"dist/index.esm.js","repository":{"type":"git","url":"git+https://github.com/docusealco/signature-maker-js.git"},"keywords":["js-signature","signature","signature-drawing"],"author":{"name":"Alex Turchyn","email":"alex@docuseal.com"},"license":"MIT","bugs":{"url":"https://github.com/docusealco/signature-maker-js/issues"},"homepage":"https://github.com/docusealco/signature-maker-js#readme","dependencies":{"signature_pad":"^5.0.3"},"devDependencies":{"esbuild":"^0.23.1"},"scripts":{"build":"node esbuild.config.js"},"_id":"@docuseal/signature-maker-js@1.0.1","gitHead":"4c57a391ce50c05506ebdc8384d62a72df61d0d8","_nodeVersion":"22.9.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-xXj4lEsz5w1UIXqCPnN4Fz7nCoxDB911bgxPn+g3th+hzGa3UMvVxHUDaEudesNtQAVWjnMAVpKLDZfXjIKanw==","shasum":"073bdaf2c09fa3bbabbfdfcebb948e69dcdda808","tarball":"https://registry.npmjs.org/@docuseal/signature-maker-js/-/signature-maker-js-1.0.1.tgz","fileCount":5,"unpackedSize":93724,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpWswxVQes3WOObLnSELUjmjfP8fSvMlibusFdZi7tJAiBCim2PKGYSoN0JF5s+S0WbZYUv7mx4XQpobPdkmoSSaQ=="}]},"_npmUser":{"name":"alex.turchyn","email":"alex@docuseal.com"},"directories":{},"maintainers":[{"name":"petem","email":"pete@docuseal.co"},{"name":"alex.turchyn","email":"alex@docuseal.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/signature-maker-js_1.0.1_1730570162316_0.6744731459881887"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-17T13:55:36.895Z","modified":"2024-11-02T17:56:03.316Z","1.0.0":"2024-09-17T13:55:37.355Z","1.0.1":"2024-11-02T17:56:02.523Z"},"bugs":{"url":"https://github.com/docusealco/signature-maker-js/issues"},"author":{"name":"Alex Turchyn","email":"alex@docuseal.com"},"license":"MIT","homepage":"https://github.com/docusealco/signature-maker-js#readme","keywords":["js-signature","signature","signature-drawing"],"repository":{"type":"git","url":"git+https://github.com/docusealco/signature-maker-js.git"},"description":"JS library for drawing signatures","maintainers":[{"name":"petem","email":"pete@docuseal.co"},{"name":"alex.turchyn","email":"alex@docuseal.com"}],"readme":"<p align=\"center\">\n  <a href=\"https://www.docuseal.com/online-signature\" target=\"_blank\">\n    <img width=\"600\" height=\"356\" src='https://github.com/user-attachments/assets/305904a9-291f-416d-ac32-baaf22970450' alt='Signature Maker'>\n  </a>\n</p>\n\n# Signature Maker JS\n\nSignature Maker is a web component that lets users draw or type their signature.\n\n#### Other implementations\n\n- [React](https://github.com/docusealco/signature-maker-react)\n- [Vue](https://github.com/docusealco/signature-maker-vue)\n\n## Demo\n\nTry the live demo [here](https://www.docuseal.com/online-signature)\n\n## Documentation\n\nCheck out the full documentation [here](https://www.docuseal.com/docs/embedded/signature#js).\n\n## Installation\n\n```bash\nnpm install @docuseal/signature-maker-js\n```\n\nOR\n\n```bash\nyarn add @docuseal/signature-maker-js\n```\n\nOR\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@docuseal/signature-maker-js/dist/index.cjs.min.js\"></script>\n```\n\n## Usage\n\nBasic Usage with standard styles and default signature saving behavior:\n\n```html\n<signature-maker\n  id=\"signatureMaker\"\n  data-download-on-save=\"true\"\n>\n</signature-maker>\n```\n\n---\n\nUsage with default styles but custom signature saving behavior, such as uploading the signature to a server:\n\n```html\n<signature-maker id=\"signatureMaker\"><signature-maker>\n\n<script>\n  window.signatureMaker.addEventListener('save', (e) => {\n    fetch('/save-signature', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ file: e.detail.base64 }),\n    });\n  })\n</script>\n```\n\n---\n\nUsage without a save signature button, embedded in another form. The signature will be stored in a form field named `signature`:\n\n```html\n<form id=\"myForm\" method=\"POST\" action=\"/submit-form\">\n  <input name=\"name\" type=\"text\">\n  <signature-maker\n    id=\"signatureMaker\"\n    data-with-submit=\"false\"\n  >\n    <input type=\"hidden\" type=\"file\" name=\"signature\">\n  </signature-maker>\n  <button type=\"submit\">Submit</button>\n</form>\n```\n\n---\n\nUsage without a save signature button and tracking each signature change:\n\n```html\n<signature-maker\n  id=\"signatureMaker\"\n  data-with-submit=\"false\"\n>\n</signature-maker>\n<script>\n  window.signatureMaker.addEventListener('change', (e) => {\n    if (e.detail.base64) {\n      fetch('/background-save-signature', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ file: e.detail.base64 }),\n      });\n    } else {\n      console.log('No signature to save');\n    }\n  })\n</script>\n```\n\n---\n\nUsage with custom button labels and classes (DaisyUI):\n\n```html\n<signature-maker\n  class=\"block my-8\"\n  data-save-button-text=\"Télécharger\"\n  data-undo-button-text=\"Annuler\"\n  data-clear-button-text=\"Clair\"\n  data-draw-type-button-text=\"Dessiner\"\n  data-text-type-button-text=\"Type\"\n  data-upload-type-button-text=\"Télécharger\"\n  data-text-input-placeholder=\"Tapez votre signature ici\"\n  data-type-buttons-container-class=\"flex gap-2 mb-4 justify-center\"\n  data-draw-type-button-class=\"flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold\"\n  data-draw-type-button-active-class=\"bg-neutral text-white font-semibold\"\n  data-text-type-button-class=\"flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold\"\n  data-text-type-button-active-class=\"bg-neutral text-white font-semibold\"\n  data-upload-type-button-class=\"flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold\"\n  data-upload-type-button-active-class=\"bg-neutral text-white font-semibold\"\n  data-text-input-class=\"input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl\"\n  data-canvas-class=\"bg-white border border-base-300 rounded-2xl w-full\"\n  data-undo-button-class=\"btn btn-outline btn-sm font-medium\"\n  data-clear-button-class=\"btn btn-outline btn-sm font-medium\"\n  data-save-button-class=\"btn btn-neutral text-white text-base w-full\"\n>\n</signature-maker>\n```\n\n---\n\nUsage with customization of certain elements using CSS classes and styles:\n\n```html\n<signature-maker\n  data-save-button-class=\"btn btn-neutral text-white text-base w-full\"\n  data-canvas-class=\"bg-white border border-base-300 rounded-2xl w-full\"\n  data-canvas-style=\"border: 2px solid #000;\"\n>\n</signature-maker>\n```\n\n## Customization\n\nSignature Maker can be customized with the following attributes:\n\n```\ndata-download-on-save\ndata-with-typed\ndata-with-drawn\ndata-with-upload\ndata-with-color-select\ndata-with-submit\ndata-save-button-text\ndata-control-buttons-container-class\ndata-control-buttons-container-style\ndata-save-button-class\ndata-save-button-style\ndata-save-button-disabled-class\ndata-save-button-disabled-style\ndata-undo-button-text\ndata-undo-button-class\ndata-undo-button-style\ndata-clear-button-text\ndata-clear-button-class\ndata-clear-button-style\ndata-text-input-placeholder\ndata-text-input-class\ndata-text-input-style\ndata-canvas-class\ndata-canvas-style\ndata-type-buttons-container-class\ndata-type-buttons-container-style\ndata-draw-type-button-text\ndata-draw-type-button-class\ndata-draw-type-button-style\ndata-draw-type-button-active-class\ndata-draw-type-button-active-style\ndata-text-type-button-text\ndata-text-type-button-class\ndata-text-type-button-style\ndata-text-type-button-active-class\ndata-text-type-button-active-style\ndata-upload-type-button-text\ndata-upload-type-button-class\ndata-upload-type-button-style\ndata-upload-type-button-active-class\ndata-upload-type-button-active-style\ndata-font-url\n````\n\nThe full documentation with detailed configuration and event descriptions can be found [here](https://www.docuseal.com/docs/embedded/signature#js).\n\n# License\n\nMIT\n","readmeFilename":"README.md"}