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-base
You can use Create-react-app
to setup
the applications.
To install create-react-app
run the following command.
npm install -g create-react-app
Start a new project using create-react-app command as follows
create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
create-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 –save
The 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 start
The 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.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/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'));