React Email 6.0

¿Qué es React Email 6.0?

React Email 6.0 es una actualización open-source de React Email que proporciona un editor visual de correo electrónico que puedes insertar en tu propia aplicación. También incluye un nuevo conjunto de plantillas y un paquete unificado para importar componentes de React Email.

El propósito principal de React Email 6 es ayudar a los equipos a crear diseños de correo electrónico y generar salida lista para email (incluyendo HTML) desde un flujo de trabajo basado en React, manteniendo el editor extensible y personalizable.

Características principales

• Editor visual open-source (paquete independiente): Instala el editor como @react-email/editor e insértalo en tu app usando EmailEditor.
• Inserta en tu aplicación: Renderiza el editor directamente en React con un ejemplo mínimo de componente (return <EmailEditor />).
• Arquitectura del editor con núcleo + extensiones: El editor se divide en un núcleo integrado y una capa de extensiones, para agregar bloques/funciones personalizadas sin cambiar el núcleo.
• API de nodos componible (EmailNode) para bloques personalizados: Define nuevos bloques del editor especificando cómo se mapean a HTML y cómo se renderizan a salida de React Email.
• Soporte para temas: Carga el CSS del tema predeterminado (@react-email/editor/themes/default.css) o crea un tema personalizado para que coincida con el estilo de tu app.
• Nueva colección de plantillas: Incluye plantillas para casos comunes (flujos de autenticación y secuencias de e-commerce) proporcionadas como plantillas de React Email y archivos de Figma.
• Paquete unificado de componentes de React Email: Importa componentes desde react-email como un paquete único (el editor aún requiere instalación separada).

Cómo usar React Email 6.0

1. Instala o actualiza paquetes usando las instrucciones de la sección de actualización si vienes de React Email 5.0.
2. Instala el editor por separado (el editor no está incluido en el paquete unificado react-email):
   • npm i @react-email/editor
3. Inserta el editor en tu app de React:
   • Importa EmailEditor desde @react-email/editor y renderízalo en un componente.
4. Opcionalmente estiliza el editor:
   • Importa el CSS del tema predeterminado (@react-email/editor/themes/default.css) o aplica tu propio tema.
5. Personaliza el editor (opcional):
   • Usa la API componible (EmailNode) para definir bloques personalizados que incluyan análisis de HTML (parseHTML) y generación de salida (renderToReactEmail).
6. Comienza desde plantillas:
   • Usa las plantillas proporcionadas como base, o extrae secciones individuales a tus propias plantillas de React Email.

Casos de uso

• Inserta un compositor de email en una web app: Agrega un editor visual a un dashboard para que los usuarios creen contenido de email dentro de tu producto.
• Crea bloques de contenido personalizados para flujos específicos: Crea bloques como un aviso, cargador de medios, publicaciones sociales incrustadas o gráficos en línea definiendo un EmailNode.
• Estandariza plantillas para tipos de email comunes: Usa las nuevas plantillas de flujos de autenticación y e-commerce para reducir el tiempo en crear diseños iniciales.
• Integra el editor con el estilo UI existente: Importa el tema predeterminado para empezar rápido, luego crea un tema personalizado para que el editor coincida con tu aplicación.
• Desarrolla una librería de componentes de email mantenible: Importa componentes de diseño y UI comunes desde el paquete unificado react-email manteniendo el editor como instalación separada.

Preguntas frecuentes

• ¿Está incluido el editor en el paquete unificado react-email?
  No. El editor se instala por separado como @react-email/editor.

• ¿Puedo insertar el editor directamente en mi app de React?
  Sí. La documentación muestra cómo importar EmailEditor y renderizarlo en un componente.

• ¿Cómo agrego bloques personalizados al editor?
  Usa la API componible vía EmailNode para definir el análisis de HTML del bloque (parseHTML) y su salida de renderizado de React Email (renderToReactEmail).

• ¿Dónde encuentro las nuevas plantillas?
  Las plantillas están disponibles como plantillas de React Email y archivos de Figma, incluyendo plantillas de autenticación y e-commerce.

• ¿Qué cambia al actualizar de React Email 5.0 a 6.0?
  Los pasos de actualización eliminan @react-email/components y @react-email/preview-server, instalan react-email@latest y @react-email/ui@latest, y actualizan las importaciones para usar react-email en lugar de @react-email/components.

Alternativas

• Editores/generadores genéricos de HTML para email (no React): Útiles si solo necesitas una UI de editor y no quieres un flujo de componentes basado en React, pero pierdes el modelo de integración de React Email.
• Librerías de email React con plantillas primero: Si no necesitas un editor visual insertado en tu app, puedes depender de componentes/plantillas de React sin extensibilidad de editor.
• Editores WYSIWYG que exportan HTML: Pueden producir salida HTML para email, pero no ofrecen el mismo enfoque de nodos componibles para incrustar bloques personalizados específicos del editor en un flujo de React Email.
• Herramientas de diseño con conversión manual a markup de email: Equipos Figma-first pueden crear diseños en Figma e implementarlos manualmente en código de email; esto difiere de usar plantillas de React Email directamente y de generar salida lista para email a través del flujo del editor.