A signature pad implementation in React.
This is an unopinionated fork of react-signature-pad that does 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.
This fork also allows you to directly pass props to the underlying canvas element, has small API differences, and documents the props you can pass to it.
npm i -S react-signature-canvas
import React from 'react'
import ReactDOM from 'react-dom'
import SignatureCanvas from 'react-signature-canvas'
ReactDOM.render(
<SignatureCanvas penColor='green'
canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />,
document.getElementById('react-container')
)
The props of SignatureCanvas mainly control the properties of the pen stroke used in drawing. All props are optional.
velocityFilterWeight
:number
, default:0.7
minWidth
:number
, default:0.5
maxWidth
:number
, default:2.5
dotSize
:number
orfunction
, default:() => (this.props.minWidth + this.props.maxWidth) / 2
penColor
:string
, default:'black'
There are also two callbacks that will be called when a stroke ends and one begins, respectively.
onEnd
:function
onBegin
:function
Two additional props are used to control the canvas element. canvasProps
are
directly passed to the underlying <canvas />
element and backgroundColor
is
used in the API's clear
convenience method (which itself is called
internally during resizes)
canvasProps
:object
backgroundColor
:string
, default:'rgba(0,0,0,0)'
All API methods require a ref to the SignatureCanvas in order to use and are instance methods of the ref.
<SignatureCanvas ref={(ref) => { this.sigCanvas = ref }} />
isEmpty()
:boolean
, self-explanatoryclear()
:void
, clears the canvas using thebackgroundColor
propfromDataURL(base64String)
:void
, writes a base64 image to canvasgetCanvas()
: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 a trimmed version of it, with all whitespace removed.
$ npm start
Navigate to http://localhost:8080/ in your browser and you should be able to see the signature canvas in action.
The source code for this example is found in the example/
directory.