React Signature Pad

A signature pad implementation for react in Typescript.

Basic Usage

interface Props {

}

interface State {

}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.signaturePadRef = React.createFef<SignaturePad>();
    }

    render() {
        return (
            <SignaturePad
                ref={this.signaturePadRef}
                className={styles.SignaturePad}
            />
        )
    }

    componentDidMount() {
        const signaturePad: SignaturePad = this.signaturePadRef.current;

       // do some stuff
    }
}

Props

| Name | Optional | DefaultValue | Description | -------- | -------- | -------- | -------- | penColor | true | #000000 | Sets the color of the pen to draw | backgroundColor | true | #FFFFFF | Sets the backgroundColor of the canvas | defaultImage | true | undefined | Fills the Signaturepad on mounting with this image, does not set it on reset | height | false | 150 | Height in pixel of the pad | width | false | 300 | Width in pixel of the pad | onEnd | true | - | Callback, fired when drawing a line ends | onBegin | true | - | Callback, fired when drawing a line begins | ref | false | - | React ref for the pad, only possible way to get data out of the pad

Methods

const signaturePad: SignaturePad = this.signaturePadRef.current;

// Methods

// ===============================================
// isEmpty() - returns boolean
// ===============================================

signaturePad.isEmpty();

// ===============================================
// clear() - clears canvas
// ===============================================

signaturePad.clear();

// ===============================================
// toDataURL() - retrieves image as a data url
// ===============================================

signaturePad.toDataURL();

// ===============================================
// fromDataURL() - writes a base64 image to canvas
// ===============================================

signaturePad.fromDataURL(base64String);

Example

$ npm start

Then navigate to http://localhost:3000/ in your browser and you should be able to see the signature pad in action.