react-email-composer-widget-r18

v1.0.2

Published

2 months ago

React 18 compatible build of react-email-composer-widget.

0High
0Medium
0Low

shadab207

react email composer widget react18

React Email Composer Widget R18

Note: This is the React 18 compatible build of react-email-composer-widget. It externalizes the modern react/jsx-runtime to guarantee compatibility with React 18 applications without causing JSX runtime conflicts.

🚀 Key Features

Decoupled Architecture: Logic is separated from UI using an adapter pattern.
Dual Mode Support:
- Simple Mode: Use built-in Frappe-compatible logic with simple props (baseURL, token, etc.).
- Advanced Mode: Provide your own full apiAdapter and config for complete control.
Built-in Rich Text Editor: Integrated Quill-hosted editor (no primereact required).
Threading Support: Built-in support for in_reply_to and email thread quoting.
Modular Components:
- EmailComposerTrigger: Complete Button + Modal combo for instant integration.
- EmailComposerModal: Direct Modal for custom triggering logic.
- EmailComposer: The raw composer UI for custom layout needs.
Attachment Management: Built-in file upload handling (integrated with your API).
Template Support: Fetch and select from your own system templates.
State Management Friendly: Supports external visibility control via global stores (e.g., Zustand).

🛠️ Installation

npm install react-email-composer-widget-r18

Peer Dependencies

This widget requires the following dependencies to be installed in your project:

npm install quill@^2.0.2 @phosphor-icons/react

📋 Usage

1. Simple Mode (Using Built-in Adapter)

The easiest way to integrate. The widget handles all API calls internally using the provided baseURL and token.

import { EmailComposerTrigger } from "react-email-composer-widget-r18";
import "react-email-composer-widget-r18/styles.css";

const MyComponent = () => {
  return (
    <EmailComposerTrigger
      buttonLabel="Email"
      baseURL="https://your-api.com"
      token="your-auth-token"
      currentUserFullName="John Doe"
      defaultToEmails={["[email protected]"]}
      referenceName="Milan Pethani"       // Contact name (used for template references)
      referenceDoctype="Contact"
      activeLeadName="LEAD-001"            // If a lead is active
      activeLeadDoctype="CRM Lead"
      activeTaskName="585"                 // Falls back to task when no active lead
      activeTaskDoctype="CRM Task"
      showNotification={(title, msg) => toast.success(msg)}
      showWarning={(title, msg) => toast.warn(msg)}
      showError={(title, msg) => toast.error(msg)}
    />
  );
};

2. Advanced Mode (Using External Adapters)

Provide your own full apiAdapter and config for maximum flexibility.

import { EmailComposerTrigger } from "react-email-composer-widget-r18";
import { myApiAdapter, myConfig } from "./my-adapters";

const MyComponent = () => {
  return <EmailComposerTrigger buttonLabel="Send Email" apiAdapter={myApiAdapter} config={myConfig} />;
};

3. Manual Modal Control (with Zustand)

import { EmailComposerTrigger } from "react-email-composer-widget-r18";
import { useEmailReplyStore } from "./my-store";

const MyComponent = () => {
  const { isOpen, openModal, closeModal } = useEmailReplyStore();

  return <EmailComposerTrigger baseURL="https://api.com" token="xyz" isOpen={isOpen} onOpen={openModal} onClose={closeModal} />;
};

4. Trigger Variants (Plain Button)

import { EmailComposerTrigger } from "react-email-composer-widget-r18";
import "react-email-composer-widget-r18/styles.css";

<EmailComposerTrigger
  buttonLabel="Email"
  variant="plain"
  btnClassName="contact-button"
  baseURL={CONSTANTS.API_BASE_URL}
  token={token}
  currentUserFullName={userFullName}
  defaultToEmails={[customerEmail]}
  activeLeadName={activeLeadName}
  activeLeadDoctype="CRM Lead"
  showNotification={(title, msg) => toast.success(msg)}
  showWarning={(title, msg) => toast.warn(msg)}
  showError={(title, msg) => toast.error(msg)}
/>;

5. Use Composer Only (No Trigger)

import { EmailComposer } from "react-email-composer-widget-r18";

const MyEmailDialog = ({ isOpen, onClose, ...composerProps }: any) => {
  if (!isOpen) return null;

  return (
    <EmailComposer
      {...composerProps}
      onClose={onClose}
    />
  );
};

6. Use Built-in Modal (EmailComposerModal)

import { EmailComposerModal } from "react-email-composer-widget-r18";

<EmailComposerModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  baseURL={CONSTANTS.API_BASE_URL}
  token={token}
  currentUserFullName={userFullName}
  defaultToEmails={[customerEmail]}
  activeLeadName={activeLeadName}
  activeLeadDoctype="CRM Lead"
  referenceName={referenceName}
  replyData={replyData}
  showNotification={(title, msg) => toast.success(msg)}
  showWarning={(title, msg) => toast.warn(msg)}
  showError={(title, msg) => toast.error(msg)}
/>

⚙️ Properties (Props)

These props are available on EmailComposerTrigger, EmailComposerModal, and EmailComposer (unless specified).

Dynamic Email Template References

When the user opens the template selector, the widget automatically builds a references array and passes it to the getTemplates API:

| Scenario | References Sent | | :--- | :--- | | Active lead exists | [{"reference_doctype": "CRM Lead", "reference_name": "<leadName>"}, {"reference_doctype": "Contact", "reference_name": "<contactName>"}] | | No active lead, task exists | [{"reference_doctype": "CRM Task", "reference_name": "<taskName>"}, {"reference_doctype": "Contact", "reference_name": "<contactName>"}] | | Neither | No references sent (default behavior) |

API Example:

GET /api/method/crm_integration.crm_integration.api.email.get_email_templates?references=[{"reference_doctype":"CRM Lead","reference_name":"LEAD-001"},{"reference_doctype":"Contact","reference_name":"Milan Pethani"}]

📄 License

MIT