React Email Editor
The excellent drag-n-drop email editor by Unlayer as a React.js wrapper component. This is the most powerful and developer friendly visual email builder for your app.
Video Overview |
---|
Watch video overview: https://youtu.be/MIWhX-NF3j8 |
Live Demo
Check out the live demo here: http://react-email-editor-demo.netlify.com/ (Source Code)
Blog Post
Here's a blog post with a quickstart guide: https://medium.com/unlayer-blog/creating-a-drag-n-drop-email-editor-with-react-db1e9eb42386
Installation
The easiest way to use React Email Editor is to install it from NPM and include it in your own React build process.
npm install react-email-editor --save
Usage
Require the EmailEditor component and render it with JSX:
import React, { Component } from 'react'
import { render } from 'react-dom'
import EmailEditor from 'react-email-editor'
class App extends Component {
render() {
return <div>
<h1>react-email-editor Demo</h1>
<div>
<button onClick={this.exportHtml}>Export HTML</button>
</div>
<EmailEditor
ref={editor => this.editor = editor}
/>
</div>
}
exportHtml = () => {
this.editor.exportHtml(data => {
const { design, html } = data
console.log('exportHtml', html)
})
}
}
render(<App />, document.getElementById('app'))
Properties
style
Object
style object for the editor container (default {})minHeight
String
minimum height to initialize the editor with (default 500px)onLoad
Function
called when the editor has finished loadingoptions
Object
options passed to the Unlayer editor instance (default {})
See the Unlayer Docs for all available options.
Methods
loadDesign
-function(Object data)
- Takes the design JSON and loads it in the editorsaveDesign
-function(Function callback)
- Returns the design JSON in a callback functionexportHtml
-function(Function callback)
- Returns the design HTML and JSON in a callback function
See the example source for a reference implementation.
License
Copyright (c) 2017 Unlayer. MIT Licensed.