# 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 with loadJson
loadJson
- load an existing design from json stringundoredo
- undo and redo actionsimport Editor from 'dnd-email-editor';
return <Editor />;
ref
using useRef
and pass it to editorconst ref = React.useRef(null);
return <Editor ref={ref} />;
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());
}
};
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
mail editors
available, they are paid and not open-source
.One such example would be unlayer
, It claims to be opensource but its not.
open-source
the above reasons and also I was inspired by drag-n-drop editors in general, so I decided to make one.
Undo / Redo