How to Deploy React DOCX Editor for Mobile

27 Aug 20263 minutes to read

DOCX Editor component for mobile

At present, React DOCX Editor (Document Editor) component is not responsive for mobile, and editing functionalities are not supported in mobile browsers. However, it works properly as a document viewer in mobile browsers.

Hence, it is recommended to switch the DOCX Editor component to read-only in mobile browsers. Also, invoke the fitPage method with FitPageWidth parameter in the document change event to display one full page by adjusting the zoom factor.

The following example code illustrates how to deploy the DOCX Editor component for mobile.

import {
  DocumentEditorContainer,
  Toolbar,
  DocumentEditorContainerComponent,
} from '@syncfusion/ej2-react-documenteditor';
import * as ReactDOM from 'react-dom';
import * as React from 'react';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let container;
  let hosturl =
    'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

  function onDocumentChange() {
    let proxy = (container = DocumentEditorContainerComponent);
    //To detect the device
    let isMobileDevice = /Android|Windows Phone|webOS/i.test(
      navigator.userAgent
    );

    if (isMobileDevice) {
      proxy.restrictEditing = true;
      setTimeout(() => {
        proxy.documentEditor.fitPage('FitPageWidth');
      }, 50);
    } else {
      proxy.restrictEditing = false;
    }
  }
  return (
    <div className="App">
      <DocumentEditorContainerComponent
        id="container"
        ref={(scope) => {
          container = scope;
        }}
        style={{ height: '590px' }}
        enableToolbar={true}
        documentChange={onDocumentChange}
        serviceUrl={hosturl}
        height={'590px'}
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

You can download the complete working example from this GitHub location

You can use the restrictEditing in DocumentEditorContainer and isReadOnly in DocumentEditor based on your requirement to change the component to read-only mode.