Running unlayer.init in React

[brennanleez-coder]

Hi everyone, where do i run the unlayer.init method.

I am trying to get the editor to load from a template hence I need this setup.

[SouravBandyopadhyay]

As working in React, unlayer means => emailEditorRef.current.editor (ref hook)
Document Link: https://docs.unlayer.com/docs/react-component

import React, { useRef } from 'react';
import EmailEditor from 'react-email-editor';

const App = () => {
  const emailEditorRef = useRef(null);

  const exportHtml = () => {
    emailEditorRef.current.editor.exportHtml((data) => {
      const { html } = data;
      console.log('exportHtml', html);
    });
  };

  const onReady = () => {
    console.log('Editor is ready');
    // Load your template here
    const templateJson = {}; // Your Template JSON
    emailEditorRef.current.editor.loadDesign(templateJson);
  };

  return (
    <div>
      <div>
        <button onClick={exportHtml}>Export HTML</button>
      </div>
      
      <EmailEditor
        ref={emailEditorRef}
        onReady={onReady}
      />
    </div>
  );
};
export default App;

[paulgraveseca]

That approach doesn't work for calling the init function.

The init function doesn't exist on emailEditorRef.current.editor. I need to call init to set up things like mergeTags, how do I do this in React?

[SouravBandyopadhyay]

For merge tag you can either hardcode it inside Editor components in options or while initializing the editor connect it with some kind of dataset to load it.
<EmailEditor ref={emailEditorRef} onReady={onReady} options={{ mergeTags: { first_name: { name: "First Name", value: "{{first_name}}", }, } }} />