Dnd-email-editor NPM

Installation

# Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

What's included

Editor includes these api's

getHtml - export the design as html content
getJson - export as json string, this string can then be used with loadJson
loadJson - load an existing design from json string

Usage

Importing

import Editor from 'dnd-email-editor';

return <Editor />;

Setup a ref using useRef and pass it to editor

const ref = React.useRef(null);

return <Editor ref={ref} />;

Using getHtml(), getJson() and loadJson()

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);
  }
};

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}/>
  );

}

Purpose

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'