Repository files navigation

A React wrapper component aroundsignature_pad.

Originally, this was just anunopinionated fork ofreact-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!Hence the naming difference.Nowadays, this repo / library has significantly evolved, introducing new features, fixing various bugs, and now wrapping the upstreamsignature_pad to have its updates and bugfixes baked in.

This fork also allows you to directly passprops to the underlying canvas element, has new, documentedAPI methods you can use, has new, documentedprops you can pass to it, has alive demo, has aCodeSandbox playground, has100% test coverage, and iswritten in TypeScript.

npm i -S react-signature-canvas

importReactfrom'react'import{createRoot}from'react-dom/client'importSignatureCanvasfrom'react-signature-canvas'createRoot(document.getElementById('my-react-container')).render(<SignatureCanvaspenColor='green'canvasProps={{width:500,height:200,className:'sigCanvas'}}/>,)

The props of SignatureCanvas mainly control the properties of the pen stroke used in drawing.All props areoptional.

• velocityFilterWeight :number, default:0.7
• minWidth :number, default:0.5
• maxWidth :number, default:2.5
• minDistance:number, default:5
• dotSize :number orfunction,default:() => (this.minWidth + this.maxWidth) / 2
• penColor :string, default:'black'
• throttle:number, default:16

There are also two callbacks that will be called when a stroke ends and one begins, respectively.

• onEnd :function
• onBegin :function

Additional props are used to control the canvas element.

• canvasProps:object
  • directly passed to the underlying<canvas /> element
• backgroundColor :string, default:'rgba(0,0,0,0)'
  • used in theAPI'sclear convenience method (which itself is called internally during resizes)
• clearOnResize:bool, default:true
  • whether or not the canvas should be cleared when the window resizes

Of these props, all, except forcanvasProps andclearOnResize, are passed through tosignature_pad as itsoptions.signature_pad's internal state is automatically kept in sync with prop updates for you (via acomponentDidUpdate hook).

All API methods requirea ref to the SignatureCanvas in order to use and are instance methods of the ref.

importReact,{useRef}from'react'importSignatureCanvasfrom'react-signature-canvas'functionMyApp(){constsigCanvas=useRef(null);return<SignatureCanvasref={sigCanvas}/>}

• isEmpty() :boolean, self-explanatory
• clear() :void, clears the canvas using thebackgroundColor prop
• fromDataURL(base64String, options) :void, writes a base64 image to canvas
• toDataURL(mimetype, encoderOptions):base64string, returns the signature image as a data URL
• fromData(pointGroupArray):void, draws signature image from an array of point groups
• toData():pointGroupArray, returns signature image as an array of point groups
• off():void, unbinds all event handlers
• on():void, rebinds all event handlers
• getCanvas():canvas, returns the underlying canvas ref.Allows you to modify the canvas however you want or call methods such astoDataURL()
• getTrimmedCanvas():canvas, creates a copy of the canvas and returns atrimmed version of it, with all whitespace removed.
• getSignaturePad():SignaturePad, returns the underlying SignaturePad reference.

The API methods aremostly just wrappers aroundsignature_pad's API.on() andoff() will, in addition, bind/unbind the window resize event handler.getCanvas(),getTrimmedCanvas(), andgetSignaturePad() are new.

You can interact with the example in a few different ways:

1. Runnpm start and navigate tohttp://localhost:1234/.
   Hosted locally via theexample/ directory

2. View the live demo here.
   Hosted via thegh-pages branch, a standalone version of the code inexample/

3. Play with the CodeSandbox here.
   Hosted via thecodesandbox-example branch, a slightly modified version of the above.