React Component

Unlayer editor is also available as a React component.

Installation

The easiest way to use it is to install it from npm and include it in your own React build process.

Npm

npm install react-email-editor --save

Yarn

yarn add react-email-editor

---

Usage

1. Create a Component

In your React project, create a new file inside the src/ directory (for example, EmailComponent.js).

2. Add the Unlayer React Component

Import the EmailEditor component

/src/EmailComponent.js

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

3. Configure the Editor

Within your component, embed the <EmailEditor /> and pass the required configuration via the options prop. This includes your projectId, displayMode, version, and other optional features such as amp and customJS. Your final component code should look like this:

/src/EmailComponent.js

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

import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';

const EmailComponent = (props) => {
  const emailEditorRef = useRef<EditorRef>(null);

  const exportHtml = () => {
    const unlayer = emailEditorRef.current?.editor;

    unlayer?.exportHtml((data) => {
      const { design, html } = data;
      console.log('exportHtml', html);
    });
  };

  const onReady: EmailEditorProps['onReady'] = (unlayer) => {
    // editor is ready
    // you can load your template here;
    // the design json can be obtained by calling
    // unlayer.loadDesign(callback) or unlayer.exportHtml(callback)
    // const templateJson = { DESIGN JSON GOES HERE };
    // unlayer.loadDesign(templateJson);
  };

  return (
    <div>
      <div>
        <button onClick={exportHtml}>Export HTML</button>
      </div>
      <EmailEditor
        ref={emailEditorRef}
        onReady={onReady}
        options={{
          projectId: 123456,
          displayMode:"email",
          version:"latest",
        }}
      />
    </div>
  );
};

export default EmailComponent;

The onReady method is triggered when the editor has fully loaded. Within this method, you can call other functions such as loadDesign or registerCallback.

4. Import and Use the Component

In your App.js file, import the EmailComponent:

App.js

import EmailComponent from './EmailComponent';

Then use it in your main render method App():

App.js

import React, { useRef } from 'react';
import { render } from 'react-dom';

import EmailComponent from './EmailComponent';
const App = (props) => {
  return (
    <div>
      <EmailComponent />
    </div>
  );
};

render(<App />, document.getElementById('app'));

Once embedded, the builder will load within your app and reflect the configuration specified via the options prop.

Methods

Method	Params	Description
loadDesign	Object data	Takes the design JSON and loads it in the editor
saveDesign	Function callback	Returns the design JSON in a callback function
exportHtml	Function callback	Returns the design HTML and JSON in a callback function

Properties

Name	Type	Description	Default Value
style	Object	style object for the editor container	{}
minHeight	String	minimum height to initialize the editor with	500px
onLoad	Function	called when the editor instance is created
onReady	Function	called when the editor has finished loading
options	Object	options passed to the Unlayer editor instance. See the configuration options for all available options.	{}
tools	Object	configuration for the built-in and custom tools	{}
appearance	Object	configuration for appearance and theme	{}

Example

See the example source for a reference implementation.