React v18 Integration Example

Note

Folder structures vary between projects, so refer to this guide and adapt it appropriately for your project.

1. Place the Synap Editor Files

Place the Synap Editor package in an appropriate location under your project's src folder.

Examples:

src/synapeditor
src/SynapEditor
src/scripts/synapeditor
src/scripts/SynapEditor
...

2. Create the Synap Editor Component

Create a component named SynapEditorComponent.js that creates the Synap Editor.

In this component, define the config, html, and eventListener needed to initialize the editor.

If different values may need to be applied depending on the situation, write the component so that it accepts config, html, eventListener, etc. via props.

// SynapEditorComponent.js
import { useEffect } from 'react';
import license from '../scripts/synapeditor/license.json';
import SynapEditor from '../scripts/synapeditor/synapeditor.min';
import '../scripts/synapeditor/synapeditor.min.css';

function SynapEditorComponent({ editorId }) {
  useEffect(() => {
    const config = {
      'editor.license': license // Set the license.
      // Add other settings as needed. If necessary, accept values via props so the parent can configure them.
    };
    const html = ''; // Set the HTML shown when the editor is initialized. Accept via props if needed.
    const eventListener = {
      initialized: (event) => {
        // Event listener triggered when the editor has finished initializing.
        // Put any work that should run after initialization here.
        console.log('Editor initialized: ', event);
      }
    };

    editorInstance = new SynapEditor(editorId, config, html, eventListener);

    // Release 3.1.0 and above
    // Cleanup function that releases resources used by the editor by removing
    // event listeners and references, preventing memory leaks.
    return () => {
      if (editorInstance) {
        editorInstance.destroy();
        editorInstance = null;
      }
    }
  }, [editorId]);

  return (
    <div id={editorId}></div>
  );
}

export default SynapEditorComponent;

3. Use the Component You Created

Use SynapEditorComponent.js wherever you want to mount the Synap Editor.

// App.js
import SynapEditorComponent from './components/SynapEditorComponent'; // Import SynapEditorComponent

function App() {
  return (
    <>
      <h2>Synap Editor</h2>
      <SynapEditorComponent editorId="synapeditor" />
    </>
  );
}

export default App;