React Email 6.0

O que é React Email 6.0?

React Email 6.0 é uma atualização open-source do React Email, que fornece um editor visual de e-mail que você pode embutir em sua própria aplicação. Ele também inclui um novo conjunto de templates e um pacote unificado para importar componentes React Email.

O propósito principal do React Email 6 é ajudar equipes a criar layouts de e-mail e gerar saída pronta para e-mail (incluindo HTML) a partir de um fluxo de trabalho baseado em React, mantendo o editor extensível e personalizável.

Principais Recursos

• Editor visual open-source (pacote independente): Instale o editor como @react-email/editor e embuta-o em sua app usando EmailEditor.
• Embutir em sua aplicação: Renderize o editor diretamente no React com um exemplo mínimo de componente (return <EmailEditor />).
• Arquitetura do editor com core + extensões: O editor é dividido em um core integrado e uma camada de extensões, para que blocos/recursos personalizados possam ser adicionados sem alterar o core.
• API de nós composível (EmailNode) para blocos personalizados: Defina novos blocos do editor especificando como o bloco mapeia para HTML e como renderiza para saída React Email.
• Suporte a temas: Carregue o CSS do tema padrão (@react-email/editor/themes/default.css) ou crie um tema personalizado para combinar com o estilo da sua app.
• Nova coleção de templates: Inclui templates para casos comuns (fluxos de autenticação e sequências de e-commerce) fornecidos como templates React Email e arquivos Figma.
• Pacote unificado de componentes React Email: Importe componentes de react-email como um pacote único (o editor ainda precisa de instalação separada).

Como Usar o React Email 6.0

1. Instale ou atualize pacotes usando as instruções da seção de upgrade se você estiver migrando do React Email 5.0.
2. Instale o editor separadamente (o editor não está incluído no pacote unificado react-email):
   • npm i @react-email/editor
3. Embuta o editor em sua app React:
   • Importe EmailEditor de @react-email/editor e renderize-o em um componente.
4. Opcionalmente estilize o editor:
   • Importe o CSS do tema padrão (@react-email/editor/themes/default.css) ou aplique seu próprio tema.
5. Personalize o editor (opcional):
   • Use a API composível (EmailNode) para definir blocos personalizados que incluam parsing de HTML (parseHTML) e geração de saída (renderToReactEmail).
6. Comece a partir de templates:
   • Use os templates fornecidos como base, ou extraia seções individuais para seus próprios templates React Email.

Casos de Uso

• Embutir um compositor de e-mail em uma web app: Adicione um editor visual a um dashboard para que usuários criem conteúdo de e-mail dentro do seu produto.
• Criar blocos de conteúdo personalizados para fluxos específicos: Crie blocos como callout, uploader de mídia, posts sociais incorporados ou gráficos inline definindo um EmailNode.
• Padronizar templates para tipos comuns de e-mail: Use os novos templates de fluxo de autenticação e e-commerce para reduzir o tempo gasto criando layouts iniciais.
• Integrar o editor com o estilo de UI existente: Importe o tema padrão para começar rapidamente, depois crie um tema personalizado para que o editor combine com sua aplicação.
• Desenvolver uma biblioteca de componentes de e-mail mantível: Importe componentes comuns de layout e UI do pacote unificado react-email, mantendo o editor como instalação separada.

FAQ

• O editor está incluído no pacote unificado react-email?
  Não. O editor é instalado separadamente como @react-email/editor.

• Posso embutir o editor diretamente na minha app React?
  Sim. A documentação mostra como importar EmailEditor e renderizá-lo em um componente.

• Como adicionar blocos personalizados ao editor?
  Use a API composível via EmailNode para definir o parsing de HTML do bloco (parseHTML) e sua saída de renderização React Email (renderToReactEmail).

• Onde encontro os novos templates?
  Os templates estão disponíveis como templates React Email e arquivos Figma, incluindo autenticação e e-commerce.

• O que muda na atualização do React Email 5.0 para 6.0?
  Os passos de upgrade removem @react-email/components e @react-email/preview-server, instalam react-email@latest e @react-email/ui@latest, e atualizam as importações para usar react-email em vez de @react-email/components.

Alternativas

• Editores/geradores genéricos de HTML de e-mail (não React): Úteis se você só precisa de uma UI de editor e não quer um fluxo de componentes baseado em React, mas perde o modelo de integração do React Email.
• Bibliotecas de e-mail React com foco em templates: Se você não precisa de um editor visual embutido na app, pode depender de componentes/templates React sem extensibilidade de editor.
• Editores WYSIWYG que exportam HTML: Podem produzir saída HTML de e-mail, mas podem não oferecer a mesma abordagem de nós composíveis para embutir blocos personalizados específicos do editor em um fluxo React Email.
• Ferramentas de design com conversão manual para markup de e-mail: Equipes Figma-first podem criar layouts no Figma e implementá-los manualmente em código de e-mail; isso difere de usar templates React Email diretamente e de gerar saída pronta para e-mail via fluxo do editor.