Document Editor Method in React

Docs
1

According to: Methods, " After initializing document editor you will get the object that can be used to call the methods.". How to get this method if i use React?

I have read React and it never manually initialize document editor.

My component code:

export default function OnlyofficeDoc() {
  return (
    <div className="w-screen h-screen">
      <DocumentEditor
        id="docxEditor"
        documentServerUrl="http://localhost:80"
        config={document.data}
        events_onDocumentReady={onDocumentReady}
        onLoadComponentError={onLoadComponentError}
        events_onRequestRename={onRequestRename}
        events_onMetaChange={onMetaChange}
        events_onRequestHistory={onRequestHistory}
      />
    </div>
  );
}

I use latest ONLYOFFICE Docs Community Edition for Docker version on local server

2

Hello @abi

You need to define methods prior to the initialization of editor. Second provided link in step 4 has simple example that demonstrates how to:

function onDocumentReady(event) {
  console.log("Document is loaded")
}
function onLoadComponentError(errorCode, errorDescription) {
  ... // your code
}

export default function App() {
  return (
    <DocumentEditor
      id="docxEditor"
      documentServerUrl="http://documentserver/"
      config={config}
      events_onDocumentReady={onDocumentReady}
      onLoadComponentError={onLoadComponentError}
    />
  )
}

Once editor is initialized, you can rely on necessary methods.