React Signature Canvas
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 new, documented API methods you can use, and has
new, documented props you can pass to it.
Installation
npm i -S react-signature-canvas
Usage
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')
)
Props
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
or function
,
default: (minWidth, maxWidth) => (minWidth + 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
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 the API's
clear
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
API
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 the backgroundColor
propfromDataURL(base64String)
: void
, writes a base64 image to canvasoff()
: void
, unbinds all event handlerson()
: void
, rebinds all event handlersgetCanvas()
: canvas
, returns the underlying canvas ref. Allows you to
modify the canvas however you want or call methods such as toDataURL()
getTrimmedCanvas()
: canvas
, creates a copy of the canvas and returns a
trimmed version of it, with all whitespace removed.
Example
$ 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.