0.1.0 • Published 6 years ago
@creatdevsolutions/cs-react-signature-pad v0.1.0
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 startThen navigate to http://localhost:3000/ in your browser and you should be able to see the signature pad in action.