React Email 6.0

Что такое React Email 6.0?

React Email 6.0 — это обновление с открытым исходным кодом для React Email, которое предоставляет визуальный редактор писем, который можно встроить в ваше собственное приложение. Оно также включает новый набор шаблонов и единый пакет для импорта компонентов React Email.

Основная цель React Email 6 — помочь командам создавать макеты писем и генерировать готовый для отправки вывод (включая HTML) на основе React-воркфлоу, сохраняя при этом расширяемость и настраиваемость редактора.

Ключевые возможности

• Визуальный редактор с открытым исходным кодом (отдельный пакет): Установите редактор как @react-email/editor и встроите его в приложение с помощью EmailEditor.
• Встраивание в ваше приложение: Отрисуйте редактор прямо в React с минимальным примером компонента (return <EmailEditor />).
• Архитектура редактора с ядром + расширениями: Редактор разделён на встроенное ядро и слой расширений, чтобы добавлять кастомные блоки/функции без изменения ядра.
• Компонуемый API узлов (EmailNode) для кастомных блоков: Определяйте новые блоки редактора, указывая, как блок преобразуется в HTML и в вывод React Email.
• Поддержка тем: Загружайте CSS стандартной темы (@react-email/editor/themes/default.css) или создавайте кастомную тему под стиль вашего приложения.
• Новый набор шаблонов: Включает шаблоны для распространённых сценариев (потоки аутентификации и последовательности e-commerce) в формате React Email и Figma-файлов.
• Единый пакет компонентов React Email: Импортируйте компоненты из react-email как из одного пакета (редактор устанавливается отдельно).

Как использовать React Email 6.0

1. Установите или обновите пакеты по инструкциям из раздела обновления, если переходите с React Email 5.0.
2. Установите редактор отдельно (редактор не входит в единый пакет react-email):
   • npm i @react-email/editor
3. Встройте редактор в ваше React-приложение:
   • Импортируйте EmailEditor из @react-email/editor и отобразите его в компоненте.
4. Опционально настройте стиль редактора:
   • Импортируйте CSS стандартной темы (@react-email/editor/themes/default.css) или примените свою тему.
5. Настройте редактор (опционально):
   • Используйте компонуемый API (EmailNode) для определения кастомных блоков с парсингом HTML (parseHTML) и генерацией вывода (renderToReactEmail).
6. Начните с шаблонов:
   • Используйте предоставленные шаблоны как основу или вставьте отдельные секции в свои шаблоны React Email.

Сценарии использования

• Встраивание композитора писем в веб-приложение: Добавьте визуальный редактор в дашборд, чтобы пользователи создавали контент писем прямо в вашем продукте.
• Создание кастомных блоков контента для конкретных воркфлоу: Создавайте блоки вроде призыва к действию, загрузчика медиа, встроенных постов соцсетей или встроенных графиков, определяя EmailNode.
• Стандартизация шаблонов для распространённых типов писем: Используйте новые шаблоны для потоков аутентификации и e-commerce, чтобы сократить время на создание начальных макетов.
• Интеграция редактора с вашим UI-стилем: Импортируйте стандартную тему для быстрого старта, затем создайте кастомную, чтобы редактор соответствовал вашему приложению.
• Разработка поддерживаемой библиотеки компонентов для писем: Импортируйте общие макеты и UI-компоненты из единого пакета react-email, сохраняя редактор как отдельную установку.

FAQ

• Входит ли редактор в единый пакет react-email?
  Нет. Редактор устанавливается отдельно как @react-email/editor.

• Можно ли встроить редактор прямо в React-приложение?
  Да. Документация показывает импорт EmailEditor и его отображение в компоненте.

• Как добавить кастомные блоки в редактор?
  Используйте компонуемый API через EmailNode для определения парсинга HTML блока (parseHTML) и его вывода в React Email (renderToReactEmail).

• Где найти новые шаблоны?
  Шаблоны доступны как React Email-шаблоны и Figma-файлы, включая шаблоны для аутентификации и e-commerce.

• В чём разница при обновлении с React Email 5.0 на 6.0?
  Шаги обновления удаляют @react-email/components и @react-email/preview-server, устанавливают react-email@latest и @react-email/ui@latest, обновляют импорты на react-email вместо @react-email/components.

Альтернативы

• Универсальные редакторы/конструкторы HTML-писем (не на React): Подходят, если нужен только UI редактора без React-воркфлоу компонентов, но теряется модель интеграции с React Email.
• Библиотеки React-писем с приоритетом шаблонов: Если визуальный редактор не нужен, можно полагаться на React-компоненты/шаблоны без расширяемости редактора.
• WYSIWYG-редакторы с экспортом HTML: Они генерируют HTML для писем, но могут не предоставлять компонуемый подход к узлам для встраивания кастомных блоков в воркфлоу React Email.
• Инструменты дизайна с ручным преобразованием в email-разметку: Команды с Figma-first создают макеты в Figma и вручную реализуют их в email-коде; это отличается от прямого использования шаблонов React Email и генерации готового вывода через редактор.