{"id":13566783,"url":"https://github.com/agilgur5/react-signature-canvas","last_synced_at":"2025-04-04T00:32:14.648Z","repository":{"id":10844286,"uuid":"66870072","full_name":"agilgur5/react-signature-canvas","owner":"agilgur5","description":"A React wrapper component around signature_pad (in \u003c 150 LoC). Unopinionated and heavily updated fork of react-signature-pad","archived":false,"fork":true,"pushed_at":"2024-07-18T15:35:42.000Z","size":1242,"stargazers_count":545,"open_issues_count":8,"forks_count":119,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-24T17:50:00.086Z","etag":null,"topics":["canvas","e-sign","e-signature","pad","react","react-signature-pad","sign","signature","signature-pad","trim","whitespace","wrapper"],"latest_commit_sha":null,"homepage":"https://agilgur5.github.io/react-signature-canvas/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"blackjk3/react-signature-pad","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agilgur5.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-29T18:36:16.000Z","updated_at":"2024-11-12T18:05:59.000Z","dependencies_parsed_at":"2023-01-16T19:46:19.901Z","dependency_job_id":null,"html_url":"https://github.com/agilgur5/react-signature-canvas","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilgur5%2Freact-signature-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilgur5%2Freact-signature-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilgur5%2Freact-signature-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilgur5%2Freact-signature-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agilgur5","download_url":"https://codeload.github.com/agilgur5/react-signature-canvas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247103290,"owners_count":20884023,"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":["canvas","e-sign","e-signature","pad","react","react-signature-pad","sign","signature","signature-pad","trim","whitespace","wrapper"],"created_at":"2024-08-01T13:02:16.721Z","updated_at":"2025-04-04T00:32:14.643Z","avatar_url":"https://github.com/agilgur5.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003c!-- markdownlint-disable first-line-heading --\u003e\n\u003cp align='center'\u003e\n  \u003cimg height='200' src='https://media.giphy.com/media/KH1emXYVIh1hT6UrrU/giphy.gif' /\u003e\n\u003c/p\u003e\n\n# react-signature-canvas\n\n\u003c!-- releases / versioning --\u003e\n[![package-json](https://img.shields.io/github/package-json/v/agilgur5/react-signature-canvas.svg)](https://npmjs.org/package/react-signature-canvas)\n[![releases](https://img.shields.io/github/tag-pre/agilgur5/react-signature-canvas.svg)](https://github.com/agilgur5/react-signature-canvas/releases)\n[![commits](https://img.shields.io/github/commits-since/agilgur5/react-signature-canvas/latest.svg)](https://github.com/agilgur5/react-signature-canvas/commits/main)\n\u003cbr\u003e\u003c!-- downloads --\u003e\n[![dt](https://img.shields.io/npm/dt/react-signature-canvas.svg)](https://npmjs.org/package/react-signature-canvas)\n[![dy](https://img.shields.io/npm/dy/react-signature-canvas.svg)](https://npmjs.org/package/react-signature-canvas)\n[![dm](https://img.shields.io/npm/dm/react-signature-canvas.svg)](https://npmjs.org/package/react-signature-canvas)\n[![dw](https://img.shields.io/npm/dw/react-signature-canvas.svg)](https://npmjs.org/package/react-signature-canvas)\n\u003cbr\u003e\u003c!-- status / activity --\u003e\n[![typings](https://img.shields.io/npm/types/react-signature-canvas.svg)](src/index.tsx)\n[![build status](https://img.shields.io/github/actions/workflow/status/agilgur5/react-signature-canvas/ci.yml?branch=main)](https://github.com/agilgur5/react-signature-canvas/actions/workflows/ci.yml?query=branch%3Amain)\n[![code coverage](https://img.shields.io/codecov/c/gh/agilgur5/react-signature-canvas/main.svg)](https://codecov.io/gh/agilgur5/react-signature-canvas)\n\nA React wrapper component around [signature_pad](https://github.com/szimek/signature_pad).\n\nOriginally, this was just an _unopinionated_ fork of [react-signature-pad](https://github.com/blackjk3/react-signature-pad) that did not impose any styling or wrap any other unwanted elements around your canvas -- it's just a wrapper around a single canvas element!\nHence the naming difference.\nNowadays, this repo / library has significantly evolved, introducing new features, fixing various bugs, and now wrapping the upstream `signature_pad` to have its updates and bugfixes baked in.\n\nThis fork also allows you to directly pass [props](#props) to the underlying canvas element, has new, documented [API methods](#api) you can use, has new, documented [props](#props) you can pass to it, has a [live demo](https://agilgur5.github.io/react-signature-canvas/), has a [CodeSandbox playground](https://codesandbox.io/s/github/agilgur5/react-signature-canvas/tree/codesandbox-example), has [100% test coverage](https://codecov.io/gh/agilgur5/react-signature-canvas), and is [written in TypeScript](src/index.tsx).\n\n## Installation\n\n```sh\nnpm i -S react-signature-canvas\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport { createRoot } from 'react-dom/client'\nimport SignatureCanvas from 'react-signature-canvas'\n\ncreateRoot(\n  document.getElementById('my-react-container')\n).render(\n  \u003cSignatureCanvas penColor='green'\n    canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} /\u003e,\n)\n```\n\n### Props\n\nThe props of SignatureCanvas mainly control the properties of the pen stroke used in drawing.\nAll props are **optional**.\n\n- `velocityFilterWeight` : `number`, default: `0.7`\n- `minWidth` : `number`, default: `0.5`\n- `maxWidth` : `number`, default: `2.5`\n- `minDistance`: `number`, default: `5`\n- `dotSize` : `number` or `function`,\n  default: `() =\u003e (this.minWidth + this.maxWidth) / 2`\n- `penColor` : `string`, default: `'black'`\n- `throttle`: `number`, default: `16`\n\nThere are also two callbacks that will be called when a stroke ends and one begins, respectively.\n\n- `onEnd` : `function`\n- `onBegin` : `function`\n\nAdditional props are used to control the canvas element.\n\n- `canvasProps`: `object`\n  - directly passed to the underlying `\u003ccanvas /\u003e` element\n- `backgroundColor` : `string`, default: `'rgba(0,0,0,0)'`\n  - used in the [API's](#api) `clear` convenience method (which itself is called internally during resizes)\n- `clearOnResize`: `bool`, default: `true`\n  - whether or not the canvas should be cleared when the window resizes\n\nOf these props, all, except for `canvasProps` and `clearOnResize`, are passed through to `signature_pad` as its [options](https://github.com/szimek/signature_pad#options).\n`signature_pad`'s internal state is automatically kept in sync with prop updates for you (via a `componentDidUpdate` hook).\n\n### API\n\nAll API methods require [a ref](https://react.dev/learn/manipulating-the-dom-with-refs) to the SignatureCanvas in order to use and are instance methods of the ref.\n\n```jsx\nimport React, { useRef } from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\n\nfunction MyApp() {\n  const sigCanvas = useRef(null);\n\n  return \u003cSignatureCanvas ref={sigCanvas} /\u003e\n}\n```\n\n- `isEmpty()` : `boolean`, self-explanatory\n- `clear()` : `void`, clears the canvas using the `backgroundColor` prop\n- `fromDataURL(base64String, options)` : `void`, writes a base64 image to canvas\n- `toDataURL(mimetype, encoderOptions)`: `base64string`, returns the signature image as a data URL\n- `fromData(pointGroupArray)`: `void`, draws signature image from an array of point groups\n- `toData()`: `pointGroupArray`, returns signature image as an array of point groups\n- `off()`: `void`, unbinds all event handlers\n- `on()`: `void`, rebinds all event handlers\n- `getCanvas()`: `canvas`, returns the underlying canvas ref.\n  Allows you to modify the canvas however you want or call methods such as `toDataURL()`\n- `getTrimmedCanvas()`: `canvas`, creates a copy of the canvas and returns a [trimmed version](https://github.com/agilgur5/trim-canvas) of it, with all whitespace removed.\n- `getSignaturePad()`: `SignaturePad`, returns the underlying SignaturePad reference.\n\nThe API methods are _mostly_ just wrappers around [`signature_pad`'s API](https://github.com/szimek/signature_pad#api).\n`on()` and `off()` will, in addition, bind/unbind the window resize event handler.\n`getCanvas()`, `getTrimmedCanvas()`, and `getSignaturePad()` are new.\n\n## Example\n\nYou can interact with the example in a few different ways:\n\n1. Run `npm start` and navigate to [http://localhost:1234/](http://localhost:1234/).\u003cbr\u003e\n   Hosted locally via the [`example/`](example/) directory\n\n1. [View the live demo here](https://agilgur5.github.io/react-signature-canvas/).\u003cbr\u003e\n   Hosted via the [`gh-pages` branch](https://github.com/agilgur5/react-signature-canvas/tree/gh-pages), a standalone version of the code in [`example/`](example/)\n\n1. [Play with the CodeSandbox here](https://codesandbox.io/s/github/agilgur5/react-signature-canvas/tree/codesandbox-example).\u003cbr\u003e\n   Hosted via the [`codesandbox-example` branch](https://github.com/agilgur5/react-signature-canvas/tree/codesandbox-example), a slightly modified version of the above.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilgur5%2Freact-signature-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagilgur5%2Freact-signature-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilgur5%2Freact-signature-canvas/lists"}