Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unlayer/react-email-editor
Drag-n-Drop Email Editor Component for React.js
https://github.com/unlayer/react-email-editor
builder drag-and-drop email email-builder email-editor email-marketing email-template html-email html-emails react-component template
Last synced: 3 days ago
JSON representation
Drag-n-Drop Email Editor Component for React.js
- Host: GitHub
- URL: https://github.com/unlayer/react-email-editor
- Owner: unlayer
- License: mit
- Created: 2017-10-01T22:44:29.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-24T20:38:07.000Z (about 2 months ago)
- Last Synced: 2024-12-02T15:07:33.676Z (10 days ago)
- Topics: builder, drag-and-drop, email, email-builder, email-editor, email-marketing, email-template, html-email, html-emails, react-component, template
- Language: TypeScript
- Homepage: https://unlayer.com/
- Size: 2.58 MB
- Stars: 4,635
- Watchers: 52
- Forks: 744
- Open Issues: 219
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-web-editor - react-email-editor - Drag-n-Drop Email Editor Component for React.js. (Design editor)
- awesome-opensource-email - React Email Editor - Drag-n-Drop Email Editor Component for React.js (Editing / Email Builder & Visual Editing Component)
- awesome-list - react-email-editor - n-Drop Email Editor Component for React.js | unlayer | 2962 | (JavaScript)
- best-of-react - GitHub - 59% open · ⏱️ 09.05.2024): (Editor Components)
README
# React Email Editor
The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [React.js](http://facebook.github.io/react) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app.
| Video Overview |
| :-------------------------------------------------------------------------------------------------------------------------------: |
| [](https://www.youtube.com/watch?v=MIWhX-NF3j8) |
| _Watch video overview: https://youtu.be/MIWhX-NF3j8_ |
## Live Demo
Check out the live demo here: https://react-email-editor-demo.netlify.app/ ([Source Code](https://github.com/unlayer/react-email-editor/tree/master/demo/src))
## 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:
```javascript
import React, { useRef } from 'react';
import { render } from 'react-dom';
import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';
const App = (props) => {
const emailEditorRef = useRef(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 (
Export HTML
);
};
render(, document.getElementById('app'));
```
See the [example source](https://github.com/unlayer/react-email-editor/blob/master/demo/src/example/index.tsx) for a reference implementation.
### Methods
All unlayer methods are available in the editor instance (`emailEditorRef.current.editor`). See the [Unlayer Docs](https://docs.unlayer.com/) for more information, or log the object in the console to explore it. Here are the most used ones:
| 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
- `editorId` {`String`} HTML div id of the container where the editor will be embedded (optional)
- `minHeight` {`String`} minimum height to initialize the editor with (default 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 (default {})
- See the [Unlayer Docs](https://docs.unlayer.com/docs/getting-started#configuration-options) for all available options.
- `style` {`Object`} style object for the editor container (default {})
## Custom Tools
Custom tools can help you add your own content blocks to the editor. Every application is different and needs different tools to reach it's full potential. [Learn More](https://docs.unlayer.com/docs/custom-tools)
[](https://docs.unlayer.com/docs/custom-tools)
## Localization
You can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)
### License
Copyright (c) 2024 Unlayer. [MIT](LICENSE) Licensed.