Installation and Usage

This page will help you install and run the email editor.

Install the NPM package

The first step to add the email editor to your web app is to install the raven-react-email-editor from NPM and include it in your react build process. It is a react.js wrapper around email editor.

npm i raven-react-email-editor

Import the EmailEditor component and render it with JSX

import React, { useState, useCallback, useRef } from "react";
import EmailEditor from "raven-react-email-editor";

const myStyle = {
  div: {
    height: "100vh",
  },
  nav: {
    height: "8%",
    borderBottom: "1px solid #a39f9f",
  },
  button: {
    float: "right",
    margin: "10px 20px 10px 10px",
    padding: "10px 40px",
    color: "white",
    border: "1px solid rgba(88, 80, 236, 0.5)",
    fontSize: "0.875rem",
    backgroundColor: "#5850EC",
    borderRadius: "4px",
    cursor: "pointer",
  },
  editor: {
    height: "91.9%",
  },
};

function App() {
  const [savedState, setSavedState] = useState({ state: "", html: "" });
  const [isLoaded, setIsLoaded] = useState(false);
  const editorRef = useRef(null);
  const onLoad = () => {
    setIsLoaded(true);
  };

  const onFetched = useCallback((state, html) => {
    setSavedState((prevState) => ({
      ...prevState,
      state: state,
      html: html,
    }));
    setIsLoaded(true);
  }, []);

  const onEditorSave = useCallback(() => {
    if (isLoaded) {
      setIsLoaded(false);
      editorRef.current.fetchState();
    }
  }, [isLoaded]);

  return (
    <div style={myStyle.div}>
      <nav style={myStyle.nav}>
        <button onClick={onEditorSave} style={myStyle.button}>
          SAVE
        </button>
      </nav>
      <div style={myStyle.editor}>
        <EmailEditor
          state={savedState.state}
          onEditorLoad={onLoad}
          onFetched={onFetched}
          ref={editorRef}
          //editorHostUrl={add your email editor's url}
        />
      </div>
    </div>
  );
}

export default App;

Properties

Props	Description
state	describes the editor's state. pass a state you saved earlier to load an already designed email. pass empty to load an empty editor.
onEditorLoad	callback when editor has loaded completely. Params - empty
onFetched	callback that gives the state of editor and html of the email. Params - state, html
editorHostUrl	defines the URL of the editor to be used. If you want to use your own email editor, just pass that URL to editorHostUrl.