react-signature-canvas-zwb

Installation

npm i -S react-signature-canvas-zwb

or

yarn add react-signature-canvas-zwb

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import Canvas from 'react-signature-canvas-zwb'

ReactDOM.render(
  <Canvas width={width} height={height} strokeStyle={'red'} lineWidth={3}/>,
  document.getElementById('react-container')
)

Props

• style : object, default: 0.7
• width : number, default: 100
• height : number, default: 100
• strokeStyle: string, default: 5
• lineWidth : number or function,

API

All API methods require a ref to the Canvas in order to use and are instance methods of the ref.

<Canvas ref={(ref) => { this.sigCanvas = ref }} />

• clear() : void, clears the canvas using the backgroundColor prop
• getPic(mimetype, encoderOptions): base64string, returns the signature image as a data URL

Example

You can interact with the example in a few different ways:

1. Run npm start and navigate to http://localhost:8080/. Hosted locally via the example/ directory