Forums

The current react demo is outdated both in the use of named refs and in the use of classes

https://reactjs.org/docs/refs-and-the-dom.html

https://reactjs.org/docs/hooks-intro.html

The follow is `App.tsx` which shows an example using hooks.

import React, { Component, createRef, useRef, useEffect } from 'react';

import * as MyScriptJS from 'myscript'

import 'myscript/dist/myscript.min.css';

const editorStyle = {

 'minWidth': '100px',

 'minHeight': '100px',

 'width': '100vw',

 'height': 'calc(100vh - 190px)',

 'touchAction': 'none',

};

export const App = () => {

 const editorRef = useRef(null);

 useEffect(() => {

 let node: any = editorRef.current;

 node = MyScriptJS.register(editorRef.current, {

 recognitionParams: {

 type: 'TEXT',

 protocol: 'WEBSOCKET',

 apiVersion: 'V4',

 server: {

 scheme: 'https',

 host: 'webdemoapi.myscript.com',

 applicationKey: '1463c06b-251c-47b8-ad0b-ba05b9a3bd01',

 hmacKey: '60ca101a-5e6d-4159-abc5-2efcbecce059',

 },

 },

 });

 window.addEventListener("resize", () => { node && node.resize() });

 }, []);

 return (

 <div style={editorStyle} ref={editorRef} touch-action="none">

 </div>

 );

}

 
Can we create pull requests to update the old demos?