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.


Did this page help you?