react-handwriting-recognition provides an input component with handwriting recognition provided by MyScript
You can you it inside from a React component, or just use the pure Javascript API.
Passed as props of the React component or to the Javascript API
type: React.PropTypes.stringlanguage: React.PropTypes.stringprotocol: React.PropTypes.stringhost: React.PropTypes.stringtimeout: React.PropTypes.numberminWidth: React.PropTypes.stringminHeight: React.PropTypes.stringwidth: React.PropTypes.stringheight: React.PropTypes.stringapplicationKey: React.PropTypes.string.isRequiredhmacKey: React.PropTypes.string.isRequiredonError: React.PropTypes.funconChange: React.PropTypes.funconInit: React.PropTypes.funconShutdown: React.PropTypes.func
See the documentation of the MyScript javascript library for more details here
import React from 'react';
import { HandwritingInput } from 'react-handwriting-recognition';
export default React.createClass({
getInitialState() {
return {
recognized: '',
error: undefined,
};
},
clear() {
this.controls.clear();
},
inputChanged(data, label) {
this.setState({ recognized: label });
},
displayError(error) {
this.setState({ error });
},
render() {
return (
<div style={{ marginBottom: '10px' }}>
{
this.state.error ?
<span className="label label-danger">Last error : {this.state.error}</span> :
null
}
<button type="button" onClick={this.clear}>Clear</button>
<input type="text" style="width: 340px; font-size: 18px"></input>
<HandwritingInput
applicationKey="xxxxx-xxxxx" hmacKey="xxxxx-xxxxx"
protocol="WebSocket"
onChange={this.inputChanged} onError={this.displayError}
onInit={(controls) => this.controls = controls} />
</div>
);
},
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Handwriting Recognition</title>
<link rel="stylesheet" href="./index.css"/>
</head>
<body>
<div style="margin-bottom: 10px">
<button id="delete" type="button">Delete</button>
<input type="text" id="recognized" style="width: 340px; font-size: 18px"></input>
</div>
<div id="app"></div>
<script src="/dist/react-handwriting-recognition.js"></script>
<script>
(function() {
var inputControls;
var input = document.getElementById('recognized');
var deleteButton = document.getElementById('delete');
function clearHandwritingInput(e) {
e.preventDefault();
inputControls.clear();
}
HandwritingRecognition.input({
node: document.getElementById('app'), // where to render the handwriting recognition input
applicationKey: 'xxxxx-xxxxx',
hmacKey: 'xxxxx-xxxxx',
protocol: 'WebSocket',
onChange: function(data, label) {
input.value = label;
},
onInit: function(controls) {
inputControls = controls;
deleteButton.addEventListener('click', clearHandwritingInput);
},
onShutdown: function(controls) {
deleteButton.removeEventListener('click', clearHandwritingInput);
}
});
})();
</script>
</body>
</html>MyScript javascript library and Google CryptoJS are not using commonJS conventions and exposes/requires dependencies from the global namespace. So I had to hack them a little bit to make everything works together (and include everything into the bundle file with require imports).