Getting Started

28 Feb 20171 minute to read

The ReactJS Signature simplifies creation of a signature capture in a browser, allowing a user to draw a signature using mouse or touch.

This section explains briefly about how to create a Signature component in your application with ReactJS by the following step-by-step instructions. The following screenshot demonstrates the functionality of Signature component.

Create a Signature component in ReactJS

You can create a React application and add necessary scripts and styles with the help of the given React Getting Started Documentation.

Create a JSX file for rendering AutoComplete component using <EJ.Signature> syntax. Add required properties to it in <EJ. Signature > tag element

HTML

"use strict";

ReactDOM.render(   
<EJ.Signature id="mySignature" height={400}>
  </EJ.Signature>,
document.getElementById('signature-default')
);

Define an HTML element for adding AutoComplete in the application and refer the JSX file.

HTML

<div id="'signature-default"></div>
 <script type="text/babel" src="signature.jsx"></script>

Run the above code to render the following output.

Adjusting Signature Size

You can customize the width and height of the Signature by width and height properties. These properties completely depend on signature canvas. The width and height are adjusted within the signature canvas.

The following code example is used to render the Signature component with customized width and height.

HTML

"use strict";

ReactDOM.render(   

&lt;EJ.Signature id="mySignature" isResponsive="true" height={300} width={200}&gt;

  &lt;/EJ.Signature&gt;,

document.getElementById('signature-default')

);

The following screenshot illustrates signature with customized width and height.