Cloud Development Kit

Answered

React demo using useRef and useEffect hook

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?


Best Answer

Dear Stephen,


thank you for contacting us and the interest you show to our technology.


Of course, fee free to submit a pull request to update the demos!


Thanks for your help!


Best regards,


Olivier

1 Comment

Answer

Dear Stephen,


thank you for contacting us and the interest you show to our technology.


Of course, fee free to submit a pull request to update the demos!


Thanks for your help!


Best regards,


Olivier