Drag and Drop E-mail Editor
screens / live demo here
.gif)
# Yarn
yarn add dnd-email-editor
# NPM
npm install dnd-email-editor
Props that can be passed to the component:
| Prop | Type | Default | Optional | Description |
|---|---|---|---|---|
preview |
boolean | true |
true | show/hide the inbuilt preview button. |
showUndoRedo |
boolean | true |
true | show/hide the inbuilt undo/redo button. You can create your own undoredo functionality with undoredo from api methods below |
Editor exposes these api methods
getHtml- export the design as html contentgetJson- export as json string, this string can then be used withloadJsonloadJson- load an existing design from json stringundoredo- undo and redo actions
- Importing
import Editor from 'dnd-email-editor';
return <Editor />;- Setup a
refusinguseRefand pass it to editor
const ref = React.useRef(null);
return <Editor ref={ref} />;- Using
getHtml(),getJson(),loadJson(),undoredo
const logValues = () => {
if (ref.current) {
const html = ref.current.getHtml();
const json = ref.current.getJson();
console.log(html, json);
}
};
const loadJson = (json: string) => {
if (ref.current) {
ref.current.loadJson(json);
}
};
const performUndoAction = () => {
if (ref.current) {
ref.current.undoActionCallback();
// to check if undo is possible
console.log('is undo empty: ', ref.current.isUndoEmpty());
}
};
const performRedoAction = () => {
if (ref.current) {
ref.current.redoActionCallback();
// to check if redo is possible
console.log('is redo empty: ', ref.current.isRedoEmpty());
}
};- Typescript
Inorder to use typescript and get cool definitions, just pass the type to the ref
import Editor from 'dnd-email-editor';
const ExampleComponent = () => {
- const ref = useRef(null);
+ const ref = useRef<Editor>(null);
return (
<Editor ref={ref}/>
);
}There are soo many drag and drop editors that helps in creating website but not mails, because mails differ a lot from a normal html webpage
- even if there are
mail editorsavailable, they are paid and notopen-source.
One such example would be unlayer, It claims to be opensource but its not.
- Looking at their source code, they only provide their loader-script and call it as
open-source - later they ask you to pay for its features.
the above reasons and also I was inspired by drag-n-drop editors in general, so I decided to make one.
- Responsive and mobile friendly emails
- Design emails by drag and drop
- Import/Export designs
- Export/Import as JSON
- Export as HTML
- Manage Fonts
- add custom fonts
- list / add/ deletefonts
- Go back and forth with
Undo / Redo - Preview the design in the browser (Mobile & PC)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent