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

Require the EmailEditor component and render it with JSX:

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

import EmailEditor from 'react-email-editor';

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

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

  const onLoad = () => {
    // editor instance is created
    // you can load your template here;
    // const templateJson = {};
    // emailEditorRef.current.editor.loadDesign(templateJson);
  }

  const onReady = () => {
    // editor is ready
    console.log('onReady');
  };

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

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

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	`{}`
tools	Object	configuration for the built-in and custom tools	`{}`
appearance	Object	configuration for appearance and theme	`{}`
projectId	Integer	Unlayer project ID (optional)

Example

See the example source for a reference implementation.