React Email 6.0

Cos'è React Email 6.0?

React Email 6.0 è un aggiornamento open-source di React Email che fornisce un editor email visuale embeddabile nella tua applicazione. Include anche un nuovo set di template e un package unificato per importare i componenti React Email.

Lo scopo principale di React Email 6 è aiutare i team a creare layout email e generare output pronti per l'email (incluso HTML) da un workflow basato su React, mantenendo l'editor estensibile e personalizzabile.

Caratteristiche Principali

• Editor visuale open-source (package standalone): Installa l'editor come @react-email/editor e intégralo nella tua app con EmailEditor.
• Integrazione nella tua applicazione: Renderizza l'editor direttamente in React con un esempio minimo di componente (return <EmailEditor />).
• Architettura editor con core + estensioni: L'editor è diviso in un core integrato e un layer di estensioni, per aggiungere blocchi/funzioni personalizzate senza modificare il core.
• API nodi componibili (EmailNode) per blocchi personalizzati: Definisci nuovi blocchi editor specificando come mappare il blocco su HTML e come renderizzarlo in output React Email.
• Supporto temi: Carica il CSS del tema predefinito (@react-email/editor/themes/default.css) o crea un tema personalizzato per adattarlo allo stile della tua app.
• Nuova collezione di template: Include template per casi d'uso comuni (flussi di autenticazione e sequenze e-commerce) forniti come template React Email e file Figma.
• Package unificato componenti React Email: Importa i componenti da react-email come singolo package (l'editor richiede installazione separata).

Come Usare React Email 6.0

1. Installa o aggiorna i package seguendo le istruzioni della sezione upgrade se passi da React Email 5.0.
2. Installa l'editor separatamente (l'editor non è incluso nel package unificato react-email):
   • npm i @react-email/editor
3. Integra l'editor nella tua app React:
   • Importa EmailEditor da @react-email/editor e renderizzalo in un componente.
4. Personalizza lo stile dell'editor (opzionale):
   • Importa il CSS del tema predefinito (@react-email/editor/themes/default.css) o applica il tuo tema.
5. Personalizza l'editor (opzionale):
   • Usa l'API componibile (EmailNode) per definire blocchi personalizzati con parsing HTML (parseHTML) e generazione output (renderToReactEmail).
6. Parti dai template:
   • Usa i template forniti come base o importa sezioni individuali nei tuoi template React Email.

Casi d'Uso

• Integra un compositore email in un'app web: Aggiungi un editor visuale a un dashboard per permettere agli utenti di creare contenuti email nel tuo prodotto.
• Crea blocchi personalizzati per workflow specifici: Realizza blocchi come callout, caricatore media, post social incorporati o grafici inline definendo un EmailNode.
• Standardizza template per tipi email comuni: Usa i nuovi template per flussi di autenticazione e e-commerce per ridurre il tempo speso a creare layout iniziali.
• Integra l'editor con lo stile UI esistente: Importa il tema predefinito per partire subito, poi crea un tema personalizzato per far combaciare l'editor con la tua app.
• Sviluppa una libreria di componenti email manutenibile: Importa layout e componenti UI comuni dal package unificato react-email mantenendo l'editor come installazione separata.

FAQ

• L'editor è incluso nel package unificato react-email?
  No. L'editor si installa separatamente come @react-email/editor.

• Posso integrare l'editor direttamente nella mia app React?
  Sì. La documentazione mostra come importare EmailEditor e renderizzarlo in un componente.

• Come aggiungo blocchi personalizzati all'editor?
  Usa l'API componibile tramite EmailNode per definire il parsing HTML del blocco (parseHTML) e il suo output di rendering React Email (renderToReactEmail).

• Dove trovo i nuovi template?
  I template sono disponibili come template React Email e file Figma, inclusi quelli per autenticazione e e-commerce.

• Cosa cambia nell'upgrade da React Email 5.0 a 6.0?
  I passaggi di upgrade rimuovono @react-email/components e @react-email/preview-server, installano react-email@latest e @react-email/ui@latest, e aggiornano gli import per usare react-email invece di @react-email/components.

Alternative

• Editor/builder HTML email generici (non-React): Utili se serve solo un'interfaccia editor senza workflow basato su componenti React, ma perdi l'integrazione con il modello React Email.
• Librerie email React template-first: Se non serve un editor visuale embeddato, puoi basarti su componenti/template React senza estensibilità editor.
• Editor WYSIWYG che esportano HTML: Possono generare output HTML email, ma potrebbero non offrire lo stesso approccio nodi componibili per integrare blocchi personalizzati editor-specifici in un workflow React Email.
• Tool di design con conversione manuale in markup email: Team Figma-first possono creare layout in Figma e implementarli manualmente in codice email; questo differisce dall'uso diretto di template React Email e dalla generazione di output email-ready tramite workflow editor.