Skip to main content

Responsive View Example

This example demonstrates the responsive design features of Easy Email Pro, which allows you to configure different styles for desktop and mobile views.

Overview​

The responsive view feature enables you to:

  • Switch between desktop and mobile views in the editor
  • Configure separate attributes for desktop and mobile layouts
  • Preview how your email will look on different screen sizes
  • Test responsive email templates

Code Example​

import { useMemo } from "react";
import { EmailEditorProvider, EmailTemplate } from "easy-email-pro-editor";
import { Retro } from "easy-email-pro-theme";
import "easy-email-pro-theme/lib/style.css";
import "@arco-themes/react-easy-email-pro/css/arco.css";
import data from "./template.json";
import { EditorHeader } from "../../components/EditorHeader";
import { useUpload } from "../../hooks/useUpload";
import { Layout } from "@arco-design/web-react";
import React from "react";

export default function MyEditor() {
  const { upload } = useUpload();

  const initialValues: EmailTemplate | null = useMemo(() => {
    return {
      subject: data.subject,
      content: data.content as EmailTemplate["content"],
    };
  }, []);

  const onUpload = (file: Blob): Promise<string> => {
    return upload(file);
  };

  const onSubmit = (values: EmailTemplate) => {
    console.log(values);
  };

  const config = Retro.useCreateConfig({
    clientId: process.env.CLIENT_ID!,
    height: "calc(100vh - 66px)",
    onUpload,
    initialValues: initialValues,
    onSubmit: onSubmit,
    enabledResponsive: true, // Enable responsive view feature
    // ... other config
  });

  return (
    <EmailEditorProvider {...config}>
      <EditorHeader />
      <Layout.Content>
        <Retro.Layout></Retro.Layout>
      </Layout.Content>
    </EmailEditorProvider>
  );
}

Configuration​

To enable the responsive view feature, set enabledResponsive: true in your editor configuration:

const config = Retro.useCreateConfig({
  enabledResponsive: true, // Enable responsive view
  // ... other config
});

Note: showPreview is used to show the preview panel and is unrelated to the responsive view feature. The responsive view is controlled by enabledResponsive.

Features​

  • Desktop View: Configure and preview desktop layout
  • Mobile View: Configure and preview mobile layout
  • Responsive Tabs: Switch between desktop and mobile configuration tabs
  • Separate Attributes: Set different attributes for desktop and mobile views

Responsive Configuration​

Elements can have separate attributes for desktop and mobile:

{
  attributes: {
    "padding-top": "20px", // Desktop attributes
    "font-size": "48px",
  },
  mobileAttributes: {
    "padding-top": "10px", // Mobile attributes (override desktop)
    "font-size": "24px",
  },
}

When enabledResponsive is enabled, the configuration panel will show separate tabs for desktop and mobile, allowing you to configure different styles for each view.

Key Points​

  • Use enabledResponsive: true to enable responsive view functionality
  • Configure separate attributes and mobileAttributes for each element
  • Switch between desktop and mobile tabs in the configuration panel
  • Test your email templates on different screen sizes