@dearj/react - React Component for DearJ Drag & Drop Email Editor

🌟 Overview

The official React wrapper for DearJ's powerful drag-and-drop email editor. Easily integrate professional email editing capabilities into your React applications.

🚀 Features

• Seamless React Integration: Native React component with proper lifecycle handling
• Type Safety: Built with TypeScript and compatible with @dearj/types
• Template Management: Load, edit, and export email templates
• Event Handling: Built-in event system for editor interactions
• Lightweight: Minimal dependencies, optimized for React

📦 Installation

npm install @dearj/react

or

yarn add @dearj/react

🚀 Basic Usage

1. Import Module

import React, { useRef } from "react";
import { EmailEditor, EmailEditorRef } from "@dearj/react";
import { EditorConfig, Template } from "@dearj/types";

2. Component Example

const MyEmailEditor = () => {
  const editorRef = useRef<EmailEditorRef>(null);

  const editorOptions: EditorConfig = {
    authorization: "your-auth-token-here", // Required
    version: "latest", // Optional
  };

  const initialDesign: Template | undefined = undefined; // Optional

  const handleLoaded = () => {
    console.log("Editor is loaded");
  };

  const handleUpdated = () => {
    console.log("Editor design updated");
  };

  const exportHtml = async () => {
    const html = await editorRef.current?.exportHtml();
    console.log("Exported HTML:", html);
  };

  const exportJson = async () => {
    const json = await editorRef.current?.exportJson();
    console.log("Exported JSON:", json);
  };

  return (
    <div style={{ height: "600px" }}>
      <EmailEditor
        ref={editorRef}
        options={editorOptions}
        design={initialDesign}
        onLoaded={handleLoaded}
        onUpdated={handleUpdated}
      />
      <div style={{ marginTop: "1rem" }}>
        <button onClick={exportHtml}>Export HTML</button>
        <button onClick={exportJson}>Export JSON</button>
      </div>
    </div>
  );
};

⚙️ Component API

Inputs

| Input | Type | Required | Description | | --------- | ------------------ | -------- | -------------------------------------------- | | options | EditorConfig | Yes | Editor configuration including authorization | | design | Template \| null | No | Initial template to load | | onLoaded | () => void | No | Called when the editor finishes loading | | onUpdated | () => void | No | Called when the template is updated |

Methods

| Method | Returns | Description | | -------------- | ------------------- | --------------------------------------- | | exportHtml() | Promise<string> | Exports current design as HTML string | | exportJson() | Promise<Template> | Exports current design as JSON template |

🔒 Security Configuration

The authorization token is required for editor functionality. Handle tokens securely:

// Recommended approach - fetch from secure storage
editorOptions: EditorConfig = {
  authorization: "YOUR_AUTHORIZATION_TOKEN" || "",
  version: "latest",
};

📝 License

DearJ is available under the BSD-3-CLAUSE License.