Skip to content

creatdevsolutions/cs-react-signature-pad

 
 

Repository files navigation

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.

Packages

No packages published

Languages

  • TypeScript 90.9%
  • JavaScript 4.1%
  • HTML 3.8%
  • CSS 1.2%