├── codecov.yml ├── src ├── index.ts └── SignaturePad.tsx ├── .husky └── pre-commit ├── tsconfig.json ├── .gitignore ├── tsconfig.test.json ├── __tests__ ├── .eslintrc.json ├── helpers │ └── signature.ts └── SignaturePad.test.tsx ├── .editorconfig ├── example ├── app.tsx ├── tsconfig.json ├── index.html ├── webpack.config.mjs ├── package.json ├── Layout.tsx └── package-lock.json ├── prettier.config.mjs ├── jest.config.mjs ├── sonar-project.properties ├── tsconfig.base.json ├── LICENSE ├── eslint.config.mjs ├── rollup.config.ts ├── .github └── workflows │ └── ci.yml ├── package.json └── README.md /codecov.yml: -------------------------------------------------------------------------------- 1 | ignore: 2 | - '__tests__/**/*' 3 | - 'example/**/*' 4 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import SignaturePad from './SignaturePad'; 2 | 3 | export default SignaturePad; 4 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install lint-staged 5 | npm test 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base", 3 | "compilerOptions": { 4 | "esModuleInterop": false 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /node_modules 3 | /coverage 4 | /dist 5 | /example/dist 6 | /example/node_modules 7 | .DS_Store 8 | .eslintcache 9 | npm-debug.log 10 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base", 3 | "compilerOptions": { 4 | "verbatimModuleSyntax": false 5 | }, 6 | "include": ["__tests__/**/*"] 7 | } 8 | -------------------------------------------------------------------------------- /__tests__/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "node": true, 4 | "jest/globals": true 5 | }, 6 | "plugins": ["jest"], 7 | "extends": ["plugin:jest/recommended", "plugin:jest-dom/recommended"] 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | [*.{html,js,ts}] 8 | charset = utf-8 9 | indent_style = space 10 | indent_size = 4 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | 16 | [*.{json,yml,yaml}] 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /example/app.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | 4 | import Layout from './Layout'; 5 | 6 | const rootElement = document.getElementById('root'); 7 | 8 | if (!rootElement) { 9 | throw new Error('Failed to find the root element'); 10 | } 11 | 12 | createRoot(rootElement).render( 13 | 14 | 15 | , 16 | ); 17 | -------------------------------------------------------------------------------- /prettier.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('prettier').Config} */ 2 | export default { 3 | semi: true, 4 | trailingComma: 'all', 5 | singleQuote: true, 6 | printWidth: 120, 7 | tabWidth: 4, 8 | endOfLine: 'auto', 9 | overrides: [ 10 | { 11 | files: ['*.json', '*.yml', '*.yaml'], 12 | options: { 13 | tabWidth: 2, 14 | }, 15 | }, 16 | ], 17 | }; 18 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "target": "es5", 5 | "module": "esnext", 6 | "lib": ["es5", "es6", "es7", "dom"], 7 | "removeComments": true, 8 | "strict": true, 9 | "sourceMap": true, 10 | "declaration": true, 11 | "declarationDir": "./dist", 12 | "outDir": "./dist", 13 | "jsx": "react-jsx" 14 | }, 15 | "include": ["**/*"], 16 | "exclude": ["node_modules", "dist", "example"] 17 | } 18 | -------------------------------------------------------------------------------- /jest.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('jest').Config} */ 2 | export default { 3 | testEnvironment: 'jsdom', 4 | testMatch: ['**/__tests__/**/*.[jt]s?(x)'], 5 | testPathIgnorePatterns: ['/__tests__/shim.ts', '/__tests__/helpers/', '/node_modules/'], 6 | transform: { 7 | '\\.[jt]sx?$': [ 8 | 'ts-jest', 9 | { 10 | tsconfig: 'tsconfig.test.json', 11 | }, 12 | ], 13 | }, 14 | collectCoverage: true, 15 | }; 16 | -------------------------------------------------------------------------------- /sonar-project.properties: -------------------------------------------------------------------------------- 1 | # must be unique in a given SonarQube instance 2 | sonar.projectKey=michaeldzjap_react-signature-pad-wrapper 3 | 4 | # --- optional properties --- 5 | 6 | sonar.organization=michaeldzjap-github 7 | sonar.javascript.lcov.reportPaths=coverage/lcov.info 8 | sonar.exclusions=.prettierrc.js, jest.config.js, rollup.config.ts, __tests__/**, example/** 9 | 10 | # defaults to project key 11 | #sonar.projectName=My project 12 | # defaults to 'not provided' 13 | #sonar.projectVersion=1.0 14 | 15 | # Path is relative to the sonar-project.properties file. Defaults to . 16 | #sonar.sources=. 17 | 18 | # Encoding of the source code. Default is default system encoding 19 | #sonar.sourceEncoding=UTF-8 20 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "ESNext", 4 | "moduleResolution": "Bundler", 5 | "target": "ES6", 6 | "noEmit": true, 7 | "removeComments": true, 8 | "resolveJsonModule": true, 9 | "esModuleInterop": true, 10 | "verbatimModuleSyntax": true, 11 | "useDefineForClassFields": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "skipLibCheck": true, 14 | "strict": true, 15 | "declaration": true, 16 | "declarationDir": "./dist", 17 | "rootDir": "./src", 18 | "outDir": "./dist", 19 | "jsx": "react" 20 | }, 21 | "include": ["src/**/*", "rollup.config.ts"], 22 | "exclude": ["node_modules", "dist", "example"] 23 | } 24 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | React-Signature-Pad Example 9 | 10 | 11 | 12 | 17 | 18 | 19 |

20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/webpack.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname, resolve } from 'path'; 2 | import { fileURLToPath } from 'url'; 3 | 4 | const __filename = fileURLToPath(import.meta.url); 5 | const __dirname = dirname(__filename); 6 | 7 | export default { 8 | mode: 'development', 9 | entry: { 10 | vendor: ['react', 'react-dom'], 11 | bundle: { 12 | import: './app', 13 | dependOn: 'vendor', 14 | }, 15 | }, 16 | output: { 17 | filename: '[name].js', 18 | path: resolve(__dirname, 'dist'), 19 | devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]', 20 | }, 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.tsx?$/, 25 | use: 'ts-loader', 26 | exclude: /node_modules/, 27 | }, 28 | ], 29 | }, 30 | resolve: { 31 | extensions: ['.js', '.ts', '.tsx'], 32 | }, 33 | devtool: 'eval-cheap-module-source-map', 34 | }; 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Michael Dzjaparidze 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import eslint from '@eslint/js'; 4 | import prettierConfig from 'eslint-config-prettier'; 5 | import jest from 'eslint-plugin-jest'; 6 | import jestDom from 'eslint-plugin-jest-dom'; 7 | import react from 'eslint-plugin-react'; 8 | import globals from 'globals'; 9 | import tseslint from 'typescript-eslint'; 10 | 11 | export default [ 12 | { 13 | ignores: ['coverage/**', 'dist/**', 'example/dist/**', '__tests__/**'], 14 | }, 15 | { 16 | plugins: { 17 | react, 18 | }, 19 | languageOptions: { 20 | parserOptions: { 21 | ecmaFeatures: { 22 | jsx: true, 23 | }, 24 | }, 25 | globals: { 26 | ...globals.browser, 27 | }, 28 | }, 29 | }, 30 | ...tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended, prettierConfig), 31 | ...tseslint.config({ 32 | files: ['__tests__/**'], 33 | plugins: { jest }, 34 | ...jest.configs['flat/recommended'], 35 | ...jestDom.configs['flat/recommended'], 36 | }), 37 | ]; 38 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "description": "A simple example of react-signature-pad-wrapper", 5 | "main": "dist/app.js", 6 | "jsnext:main": "app.js", 7 | "scripts": { 8 | "build": "./node_modules/.bin/webpack --progress", 9 | "watch": "npm run build -- --watch" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/michaeldzjap/react-signature-pad-wrapper.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "signature_pad" 18 | ], 19 | "author": "Michael Dzjaparidze", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/michaeldzjap/react-signature-pad-wrapper/issues" 23 | }, 24 | "homepage": "https://github.com/michaeldzjap/react-signature-pad-wrapper#readme", 25 | "dependencies": { 26 | "bulma": "^1.0.0", 27 | "react": "^19.0.0", 28 | "react-dom": "^19.0.0" 29 | }, 30 | "devDependencies": { 31 | "@types/react": "^19.0.0", 32 | "@types/react-dom": "^19.0.0", 33 | "ts-loader": "^9.2.6", 34 | "typescript": "^5.0.2", 35 | "webpack": "^5.53.0", 36 | "webpack-cli": "^6.0.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /rollup.config.ts: -------------------------------------------------------------------------------- 1 | import { readFileSync } from 'fs'; 2 | 3 | import commonjs from '@rollup/plugin-commonjs'; 4 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 5 | import typescript from '@rollup/plugin-typescript'; 6 | import terser from '@rollup/plugin-terser'; 7 | 8 | const pkg = JSON.parse(readFileSync('./package.json', 'utf8')); 9 | const local = process.env.NODE_ENV === 'local'; 10 | 11 | export default { 12 | input: 'src/index.ts', 13 | output: [ 14 | { 15 | dir: './', 16 | entryFileNames: pkg.main, 17 | format: 'cjs', 18 | sourcemap: local, 19 | exports: 'named', 20 | }, 21 | { 22 | dir: './', 23 | entryFileNames: pkg.module, 24 | format: 'es', 25 | sourcemap: local, 26 | }, 27 | ], 28 | external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})], 29 | watch: { 30 | include: 'src/**', 31 | }, 32 | plugins: [ 33 | typescript({ 34 | sourceMap: local, 35 | }), 36 | commonjs(), 37 | nodeResolve(), 38 | terser(), 39 | ], 40 | }; 41 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: [push] 3 | jobs: 4 | ci: 5 | name: CI - OS ${{ matrix.os }}, Node.js ${{ matrix.node-version }} 6 | runs-on: ${{ matrix.os }} 7 | strategy: 8 | matrix: 9 | os: [ubuntu-latest] 10 | node-version: [22.x, 23.x, 24.x] 11 | steps: 12 | - name: Check out repository code 13 | uses: actions/checkout@v5 14 | - name: Use Node.js ${{ matrix.node-version }} 15 | uses: actions/setup-node@v5 16 | with: 17 | node-version: ${{ matrix.node-version }} 18 | cache: 'npm' 19 | - name: Install 20 | run: npm ci 21 | - name: Lint 22 | run: npm run lint 23 | - name: Build 24 | run: npm run prod 25 | - name: Test 26 | run: npm run test 27 | - name: Upload coverage report 28 | uses: codecov/codecov-action@v5 29 | if: ${{ matrix.os == 'ubuntu-latest' && matrix.node-version == '24.x' }} 30 | - name: SonarQube Scan 31 | uses: SonarSource/sonarqube-scan-action@v6 32 | env: 33 | SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} 34 | if: ${{ matrix.os == 'ubuntu-latest' && matrix.node-version == '24.x' }} 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-signature-pad-wrapper", 3 | "version": "4.3.2", 4 | "description": "A React component wrapper for signature_pad", 5 | "main": "dist/index.js", 6 | "module": "dist/index.es.js", 7 | "files": [ 8 | "dist" 9 | ], 10 | "types": "dist/index.d.ts", 11 | "scripts": { 12 | "test": "cross-env NODE_ENV=test npx jest", 13 | "lint": "npx eslint .", 14 | "format": "npx prettier . --write", 15 | "development": "cross-env NODE_ENV=local npx rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript", 16 | "dev": "npm run development", 17 | "production": "cross-env NODE_ENV=production npx rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript", 18 | "prod": "npm run production", 19 | "watch": "cross-env NODE_ENV=local npx rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript --watch", 20 | "clean": "rm -rf dist" 21 | }, 22 | "keywords": [ 23 | "react", 24 | "signature_pad" 25 | ], 26 | "author": "Michael Dzjaparidze", 27 | "license": "MIT", 28 | "repository": { 29 | "type": "git", 30 | "url": "git+https://github.com/michaeldzjap/react-signature-pad-wrapper.git" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/michaeldzjap/react-signature-pad-wrapper/issues" 34 | }, 35 | "peerDependencies": { 36 | "react": "17 - 19", 37 | "react-dom": "17 - 19" 38 | }, 39 | "devDependencies": { 40 | "@eslint/js": "^9.9.1", 41 | "@rollup/plugin-commonjs": "^29.0.0", 42 | "@rollup/plugin-node-resolve": "^16.0.1", 43 | "@rollup/plugin-terser": "^0.4.0", 44 | "@rollup/plugin-typescript": "^12.1.1", 45 | "@testing-library/jest-dom": "^6.1.2", 46 | "@testing-library/react": "^16.0.0", 47 | "@types/eslint__js": "^8.42.3", 48 | "@types/jest": "^30.0.0", 49 | "@types/prop-types": "^15.7.14", 50 | "@types/react": "^19.0.0", 51 | "@types/react-dom": "^19.0.0", 52 | "@types/throttle-debounce": "^5.0.0", 53 | "canvas": "^3.1.2", 54 | "cross-env": "^10.0.0", 55 | "eslint": "^9.9.1", 56 | "eslint-config-prettier": "^10.1.5", 57 | "eslint-plugin-jest": "^29.0.1", 58 | "eslint-plugin-jest-dom": "^5.0.1", 59 | "eslint-plugin-prettier": "^5.0.0", 60 | "eslint-plugin-react": "^7.20.6", 61 | "husky": "^9.0.11", 62 | "jest": "^30.0.3", 63 | "jest-environment-jsdom": "^30.0.2", 64 | "lint-staged": "^16.1.2", 65 | "prettier": "^3.0.0", 66 | "react": "^19.0.0", 67 | "react-dom": "^19.0.0", 68 | "rollup": "^4.5.0", 69 | "ts-jest": "^29.0.0", 70 | "tslib": "^2.8.1", 71 | "typescript": "^5.0.2", 72 | "typescript-eslint": "^8.4.0" 73 | }, 74 | "dependencies": { 75 | "prop-types": "^15.8.1", 76 | "signature_pad": "^5.1.0", 77 | "throttle-debounce": "^5.0.0" 78 | }, 79 | "lint-staged": { 80 | "*.ts?(x)": [ 81 | "eslint --cache --fix", 82 | "prettier --write --ignore-unknown" 83 | ] 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![NPM Version](https://img.shields.io/npm/v/react-signature-pad-wrapper.svg?branch=master) 2 | ![downloads](https://img.shields.io/npm/dt/react-signature-pad-wrapper.svg) 3 | ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/michaeldzjap/react-signature-pad-wrapper/ci.yml?branch=master) 4 | ![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/michaeldzjap/react-signature-pad-wrapper) 5 | [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) 6 | [![codecov](https://codecov.io/gh/michaeldzjap/react-signature-pad-wrapper/branch/master/graph/badge.svg)](https://codecov.io/gh/michaeldzjap/react-signature-pad-wrapper) 7 | [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=michaeldzjap_react-signature-pad-wrapper&metric=alert_status)](https://sonarcloud.io/dashboard?id=michaeldzjap_react-signature-pad-wrapper) 8 | [![License](https://img.shields.io/npm/l/react-signature-pad-wrapper.svg)](https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/LICENSE) 9 | 10 | # react-signature-pad-wrapper 11 | 12 | A React wrapper for [signature pad](https://github.com/szimek/signature_pad). 13 | 14 | ## Installation 15 | 16 | This package is available through npm: 17 | 18 | ``` 19 | npm install --save react-signature-pad-wrapper 20 | ``` 21 | 22 | ## Usage 23 | 24 | This package implements exactly the same interface as the original _signature_pad_ package and adds a couple of extra features that make responsive behaviour a little easier to deal with. For a complete overview of the available options and callables see the documentation for [signature pad](https://github.com/szimek/signature_pad). 25 | 26 | Import the component like (ES6): 27 | 28 | ```javascript 29 | import SignaturePad from 'react-signature-pad-wrapper'; 30 | ``` 31 | 32 | Options may be passed as a component property during initialization: 33 | 34 | ```javascript 35 | ... 36 | render() { 37 | return ; 38 | } 39 | ... 40 | ``` 41 | 42 | or they can be set during runtime: 43 | 44 | ```javascript 45 | ... 46 | render() { 47 | return ; 48 | } 49 | ... 50 | ``` 51 | 52 | then from somewhere else in the code (assuming the ref is defined): 53 | 54 | ```javascript 55 | // Call an instance method 56 | this.signaturePad.clear(); 57 | this.signaturePad.isEmpty(); 58 | 59 | // Get/set an object property 60 | this.signaturePad.minWidth = 5; 61 | this.signaturePad.maxWidth = 10; 62 | this.signaturePad.penColor = 'rgb(66, 133, 244)'; 63 | ``` 64 | 65 | ## Responsiveness 66 | 67 | The HTML canvas object sucks when it comes to responsiveness. The approach taken with this plugin is to use a fixed size canvas when a height and width (in pixels) is explicitly passed in as a component property: 68 | 69 | ```javascript 70 | ... 71 | render() { 72 | return ; 73 | } 74 | ... 75 | ``` 76 | 77 | If you want the component to be responsive, simply ommit the width and height property: 78 | 79 | ```javascript 80 | ... 81 | render() { 82 | return ; 83 | } 84 | ... 85 | ``` 86 | 87 | The canvas width and height will now be updated whenever the window is resized (using a debounced handler). Changing the width and height properties of a HTML canvas object will erase its current content. 88 | 89 | If you'd like to keep what is currently drawn on the canvas you can pass a `redrawOnResize` property to the component and set it to `true` (`redrawOnResize` is `false` by default): 90 | 91 | ```javascript 92 | ... 93 | render() { 94 | return ; 95 | } 96 | ... 97 | ``` 98 | 99 | This will save the current canvas content to a base64 data string before performing the resize operation and load it in the canvas right after the resize operation finishes. **Note**: the repeated saving and loading of image data when resizing often will degrade the quality rapidly. There is no easy solution around this unfortunately. Resampling the image data is imagined to help significantly, but this is a rather costly operation in general and not something you would ideally do with JavaScript in the browser on every resize event (even if throttled/debounced). 100 | 101 | ## Example 102 | 103 | This project includes a simple example that demonstrates a responsive sketch pad. To build the example: 104 | 105 | ```shell 106 | npm install 107 | cd example && npm install && npm run build 108 | ``` 109 | 110 | Then open `example/index.html` in a browser of your choice. 111 | -------------------------------------------------------------------------------- /example/Layout.tsx: -------------------------------------------------------------------------------- 1 | import { useRef, useCallback, useState, useEffect } from 'react'; 2 | 3 | import SignaturePad from '../src/SignaturePad'; 4 | 5 | /** 6 | * Layout component for the signature pad example. 7 | * Demonstrates a responsive signature pad with clear and save functionality. 8 | */ 9 | const Layout = () => { 10 | const signaturePadRef = useRef(null); 11 | const [hasSignature, setHasSignature] = useState(false); 12 | const [savedSignature, setSavedSignature] = useState(null); 13 | 14 | /** 15 | * Set up event listeners for tracking signature state. 16 | */ 17 | useEffect(() => { 18 | const signaturePad = signaturePadRef.current; 19 | 20 | if (!signaturePad) { 21 | return; 22 | } 23 | 24 | const handleBeginStroke = () => { 25 | setHasSignature(true); 26 | }; 27 | 28 | // Add event listeners 29 | signaturePad.instance.addEventListener('beginStroke', handleBeginStroke); 30 | 31 | // Cleanup event listeners 32 | return () => { 33 | signaturePad.instance.removeEventListener('beginStroke', handleBeginStroke); 34 | }; 35 | }, []); 36 | 37 | /** 38 | * Clear the signature pad. 39 | */ 40 | const handleClear = useCallback(() => { 41 | const signaturePad = signaturePadRef.current; 42 | 43 | if (signaturePad) { 44 | signaturePad.instance.clear(); 45 | setHasSignature(false); 46 | } 47 | }, []); 48 | 49 | /** 50 | * Save the signature by opening it in a new window. 51 | */ 52 | const handleSave = useCallback(() => { 53 | const signaturePad = signaturePadRef.current; 54 | 55 | if (!signaturePad) { 56 | return; 57 | } 58 | 59 | if (signaturePad.isEmpty()) { 60 | alert('Please provide a signature first.'); 61 | } else { 62 | const dataURL = signaturePad.toDataURL(); 63 | setSavedSignature(dataURL); 64 | } 65 | }, []); 66 | 67 | return ( 68 |

69 |

70 |

71 |

72 |

Digital Signature Pad

73 |

Create your signature with ease

74 |

75 |

76 | 77 |

78 |

79 |

80 |

81 |

82 |

83 | Sign in the box below using your mouse or touch screen 84 |

85 |

86 | 87 |

88 |

89 |

90 | 118 |

119 |

120 |

121 | 122 | {savedSignature && ( 123 |

124 |

125 |

126 |

127 |

✅ Saved Signature

128 |

129 |

130 |

131 |

132 |

133 |

134 |

135 | )} 136 |

137 |

138 | ); 139 | }; 140 | 141 | export default Layout; 142 | -------------------------------------------------------------------------------- /src/SignaturePad.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as PropTypes from 'prop-types'; 3 | import SigPad, { type FromDataUrlOptions, type Options, type PointGroup, type ToSVGOptions } from 'signature_pad'; 4 | import { debounce } from 'throttle-debounce'; 5 | 6 | type Props = { 7 | width?: number; 8 | height?: number; 9 | options?: Options; 10 | canvasProps?: { [key: string]: string | { [key: string]: string } }; 11 | } & DefaultProps; 12 | 13 | type DefaultProps = { 14 | redrawOnResize: boolean; 15 | debounceInterval: number; 16 | }; 17 | 18 | type State = { 19 | canvasWidth: number; 20 | canvasHeight: number; 21 | }; 22 | 23 | /** 24 | * @class 25 | * @classdesc Signature pad component. 26 | * @extends {PureComponent} 27 | */ 28 | class SignaturePad extends React.PureComponent { 29 | static displayName = 'react-signature-pad-wrapper'; 30 | 31 | static propTypes = { 32 | width: PropTypes.number, 33 | height: PropTypes.number, 34 | options: PropTypes.object, 35 | canvasProps: PropTypes.object, 36 | redrawOnResize: PropTypes.bool, 37 | debounceInterval: PropTypes.number, 38 | }; 39 | 40 | static readonly defaultProps: DefaultProps = { 41 | redrawOnResize: false, 42 | debounceInterval: 150, 43 | }; 44 | 45 | private readonly canvasRef = React.createRef(); 46 | 47 | private signaturePad!: SigPad; 48 | 49 | private readonly callResizeHandler!: debounce<() => void>; 50 | 51 | /** 52 | * Create a new signature pad. 53 | * 54 | * @param {Props} props 55 | */ 56 | constructor(props: Props) { 57 | super(props); 58 | 59 | this.state = { canvasWidth: 0, canvasHeight: 0 }; 60 | 61 | this.callResizeHandler = debounce<() => void>(this.props.debounceInterval, this.handleResize.bind(this)); 62 | } 63 | 64 | /** 65 | * Initialise the signature pad once the canvas element is rendered. 66 | * 67 | * @return {void} 68 | */ 69 | componentDidMount(): void { 70 | const canvas = this.canvasRef.current; 71 | 72 | if (canvas) { 73 | if (!this.props.width || !this.props.height) { 74 | canvas.style.width = '100%'; 75 | window.addEventListener('resize', this.callResizeHandler); 76 | } 77 | 78 | this.signaturePad = new SigPad(canvas, this.props.options); 79 | 80 | this.scaleCanvas(canvas); 81 | } 82 | } 83 | 84 | /** 85 | * Remove the resize event listener and switch the signature pad off on 86 | * unmount. 87 | * 88 | * @return {void} 89 | */ 90 | componentWillUnmount(): void { 91 | if (!this.props.width || !this.props.height) { 92 | window.removeEventListener('resize', this.callResizeHandler); 93 | } 94 | 95 | this.signaturePad.off(); 96 | } 97 | 98 | /** 99 | * Get the original signature_pad instance. 100 | * 101 | * @return {SigPad} 102 | */ 103 | get instance(): SigPad { 104 | return this.signaturePad; 105 | } 106 | 107 | /** 108 | * Get the canvas ref. 109 | * 110 | * @return {Object} 111 | */ 112 | get canvas(): React.RefObject { 113 | return this.canvasRef; 114 | } 115 | 116 | /** 117 | * Set the radius of a single dot. 118 | * 119 | * @param {number} dotSize 120 | * @return {void} 121 | */ 122 | set dotSize(dotSize: number) { 123 | this.signaturePad.dotSize = dotSize; 124 | } 125 | 126 | /** 127 | * Get the radius of a single dot. 128 | * 129 | * @return {number} 130 | */ 131 | get dotSize(): number { 132 | return this.signaturePad.dotSize; 133 | } 134 | 135 | /** 136 | * Set the minimum width of a line. 137 | * 138 | * @param {number} minWidth 139 | * @return {void} 140 | */ 141 | set minWidth(minWidth: number) { 142 | this.signaturePad.minWidth = minWidth; 143 | } 144 | 145 | /** 146 | * Get the minimum width of a line. 147 | * 148 | * @return {number} 149 | */ 150 | get minWidth(): number { 151 | return this.signaturePad.minWidth; 152 | } 153 | 154 | /** 155 | * Get the maximum width of a line. 156 | * 157 | * @param {number} maxWidth 158 | * @return {void} 159 | */ 160 | set maxWidth(maxWidth: number) { 161 | this.signaturePad.maxWidth = maxWidth; 162 | } 163 | 164 | /** 165 | * Get the maximum width of a line. 166 | * 167 | * @return {number} 168 | */ 169 | get maxWidth(): number { 170 | return this.signaturePad.maxWidth; 171 | } 172 | 173 | /** 174 | * Set the throttle for drawing the next point at most once every x ms. 175 | * 176 | * @param {number} throttle 177 | * @return {void} 178 | */ 179 | set throttle(throttle: number) { 180 | this.signaturePad.throttle = throttle; 181 | } 182 | 183 | /** 184 | * Get the throttle for drawing the next point at most once every x ms. 185 | * 186 | * @return {number} 187 | */ 188 | get throttle(): number { 189 | return this.signaturePad.throttle; 190 | } 191 | 192 | /** 193 | * Set the color used to clear the background. 194 | * 195 | * @param {string} color 196 | * @return {void} 197 | */ 198 | set backgroundColor(color: string) { 199 | this.signaturePad.backgroundColor = color; 200 | } 201 | 202 | /** 203 | * Get the color used to clear the background. 204 | * 205 | * @return {string} 206 | */ 207 | get backgroundColor(): string { 208 | return this.signaturePad.backgroundColor; 209 | } 210 | 211 | /** 212 | * Set the color used to draw the lines. 213 | * 214 | * @param {string} color 215 | * @return {void} 216 | */ 217 | set penColor(color: string) { 218 | this.signaturePad.penColor = color; 219 | } 220 | 221 | /** 222 | * Get the color used to draw the lines. 223 | * 224 | * @return {string} 225 | */ 226 | get penColor(): string { 227 | return this.signaturePad.penColor; 228 | } 229 | 230 | /** 231 | * Set weight used to modify new velocity based on the previous velocity. 232 | * 233 | * @param {number} weight 234 | * @return {void} 235 | */ 236 | set velocityFilterWeight(weight: number) { 237 | this.signaturePad.velocityFilterWeight = weight; 238 | } 239 | 240 | /** 241 | * Get weight used to modify new velocity based on the previous velocity. 242 | * 243 | * @return {number} 244 | */ 245 | get velocityFilterWeight(): number { 246 | return this.signaturePad.velocityFilterWeight; 247 | } 248 | 249 | /** 250 | * Determine if the canvas is empty. 251 | * 252 | * @return {boolean} 253 | */ 254 | public isEmpty(): boolean { 255 | return this.signaturePad.isEmpty(); 256 | } 257 | 258 | /** 259 | * Clear the canvas. 260 | * 261 | * @return {void} 262 | */ 263 | public clear(): void { 264 | this.signaturePad.clear(); 265 | } 266 | 267 | /** 268 | * Redraw the signature. 269 | * 270 | * @return {void} 271 | */ 272 | public redraw(): void { 273 | this.signaturePad.redraw(); 274 | } 275 | 276 | /** 277 | * Draw a signature from a data URL. 278 | * 279 | * @param {string} dataUrl 280 | * @param {object} options 281 | * @return {void} 282 | */ 283 | public fromDataURL(dataUrl: string, options: FromDataUrlOptions = {}): void { 284 | this.signaturePad.fromDataURL(dataUrl, options); 285 | } 286 | 287 | /** 288 | * Get the signature data as a data URL. 289 | * 290 | * @param {?string} mime 291 | * @param {?number} encoderOptions 292 | * @return {string} 293 | */ 294 | public toDataURL(type?: string, encoderOptions?: number): string { 295 | return this.signaturePad.toDataURL(type, encoderOptions); 296 | } 297 | 298 | /** 299 | * Get the signature data as an SVG data URL. 300 | * 301 | * @param {string} mime 302 | * @param {?ToSVGOptions} encoderOptions 303 | * @return {string} 304 | */ 305 | public toSvgDataUrl(encoderOptions?: ToSVGOptions): string { 306 | return this.signaturePad.toDataURL('image/svg+xml', encoderOptions); 307 | } 308 | 309 | /** 310 | * Get the signature data as an SVG string without converting to base64. 311 | * 312 | * @param {?ToSVGOptions} svgOptions 313 | * @return {string} 314 | */ 315 | toSVG(svgOptions?: ToSVGOptions): string { 316 | return this.signaturePad.toSVG(svgOptions); 317 | } 318 | 319 | /** 320 | * Draw a signature from an array of point groups. 321 | * 322 | * @param {PointGroup[]} data 323 | * @return {void} 324 | */ 325 | fromData(data: PointGroup[]): void { 326 | this.signaturePad.fromData(data); 327 | } 328 | 329 | /** 330 | * Get the signature pad data an array of point groups. 331 | * 332 | * @return {PointGroup[]} 333 | */ 334 | toData(): PointGroup[] { 335 | return this.signaturePad.toData(); 336 | } 337 | 338 | /** 339 | * Turn the signature pad off. 340 | * 341 | * @return {void} 342 | */ 343 | off(): void { 344 | this.signaturePad.off(); 345 | } 346 | 347 | /** 348 | * Turn the signature pad on. 349 | * 350 | * @return {void} 351 | */ 352 | on(): void { 353 | this.signaturePad.on(); 354 | } 355 | 356 | /** 357 | * Handle a resize event. 358 | * 359 | * @return {void} 360 | */ 361 | handleResize(): void { 362 | const canvas = this.canvasRef.current; 363 | 364 | if (canvas) { 365 | this.scaleCanvas(canvas); 366 | } 367 | } 368 | 369 | /** 370 | * Scale the canvas. 371 | * 372 | * @param {HTMLCanvasElement} canvas 373 | * @return {void} 374 | */ 375 | scaleCanvas(canvas: HTMLCanvasElement): void { 376 | const ratio = Math.max(window.devicePixelRatio || 1, 1); 377 | const width = (this.props.width || canvas.offsetWidth) * ratio; 378 | const height = (this.props.height || canvas.offsetHeight) * ratio; 379 | 380 | // Avoid needlessly setting height / width if dimensions haven't changed 381 | const { canvasWidth, canvasHeight } = this.state; 382 | 383 | if (width === canvasWidth && height === canvasHeight) return; 384 | 385 | canvas.width = width; 386 | canvas.height = height; 387 | 388 | this.setState({ canvasWidth: width, canvasHeight: height }); 389 | 390 | const ctx = canvas.getContext('2d'); 391 | 392 | if (ctx) { 393 | ctx.scale(ratio, ratio); 394 | } 395 | 396 | if (this.props.redrawOnResize && this.signaturePad) { 397 | this.redraw(); 398 | } 399 | } 400 | 401 | /** 402 | * Render the signature pad component. 403 | * 404 | * @return {ReactNode} 405 | */ 406 | render(): React.ReactNode { 407 | const { canvasProps } = this.props; 408 | 409 | return