The following section explains the required steps to build the Signature component with its basic usage in step-by-step procedure.
To get start quickly with Signature Component using React, you can check on this video:
The following list of dependencies are required to use the Signature component in your application.
|-- @syncfusion/ej2-react-baseYou can use Create-react-app to setup
the applications.
To install create-react-app run the following command.
npm install -g create-react-appStart a new project using create-react-app command as follows
create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstartcreate-react-app quickstart
cd quickstart‘react-scripts-ts’ is used for creating React app with typescript.
All the available Essential JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install. For this application, we are going to use Signature component.
To install Signature component, use the following command
npm install @syncfusion/ej2-react-inputs –saveThe above command installs Signature dependencies
which are required to render the component in the React environment.
Add Signature component’s styles as given below in App.css.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";Now, you can create Signature component in the application. Add Signature component in src/App.tsx file using the following code snippet.
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
class App extends React.Component<{}, {}> {
public render() {
return (<SignatureComponent id='signature'></SignatureComponent>);
}
}import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
class App extends React.Component {
render() {
return (<SignatureComponent id='signature'></SignatureComponent>);
}
}Use the npm run start command to run the application in the browser.
npm run startThe following example shows the default Signature.
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes Signature component.
class App extends React.Component {
render() {
return (<div id='container'>
<div id='signature-control'>
<h4>Sign here</h4>
<SignatureComponent id='signature'/>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React Signature</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React Signature Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes Signature component.
class App extends React.Component<{}, {}> {
public render() {
return (
<div id='container'>
<div id='signature-control'>
<h4>Sign here</h4>
<SignatureComponent id='signature'/>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));