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 = () => {
    // you can load your template here;
    // const templateJson = {};
    // emailEditorRef.current.editor.loadDesign(templateJson);
  };

  return (
    <div>
      <div>
        <button onClick={exportHtml}>Export HTML</button>
      </div>
      
      <EmailEditor
        ref={emailEditorRef}
        onLoad={onLoad}
      />
    </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 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?