React Email 6.0

Qu’est-ce que React Email 6.0 ?

React Email 6.0 est une mise à jour open-source de React Email, qui fournit un éditeur visuel d’e-mails que vous pouvez intégrer dans votre propre application. Elle inclut également un nouvel ensemble de modèles et un package unifié pour importer les composants React Email.

L’objectif principal de React Email 6 est d’aider les équipes à créer des mises en page d’e-mails et à générer une sortie prête pour l’e-mail (y compris HTML) à partir d’un flux de travail basé sur React, tout en gardant l’éditeur extensible et personnalisable.

Fonctionnalités principales

• Éditeur visuel open-source (package autonome) : Installez l’éditeur sous @react-email/editor et intégrez-le dans votre app avec EmailEditor.
• Intégration dans votre application : Affichez l’éditeur directement en React avec un exemple minimal de composant (return <EmailEditor />).
• Architecture de l’éditeur avec cœur + extensions : L’éditeur est divisé en un cœur intégré et une couche d’extensions, pour ajouter des blocs/fonctionnalités personnalisés sans modifier le cœur.
• API de nœuds composables (EmailNode) pour blocs personnalisés : Définissez de nouveaux blocs d’éditeur en spécifiant leur mappage vers HTML et leur rendu vers la sortie React Email.
• Support des thèmes : Chargez le CSS du thème par défaut (@react-email/editor/themes/default.css) ou créez un thème personnalisé pour correspondre au style de votre app.
• Nouvelle collection de modèles : Inclut des modèles pour cas d’usage courants (flux d’authentification et séquences e-commerce) fournis comme modèles React Email et fichiers Figma.
• Package unifié de composants React Email : Importez les composants depuis react-email en un seul package (l’éditeur nécessite une installation séparée).

Comment utiliser React Email 6.0

1. Installez ou mettez à jour les packages en suivant les instructions de la section de mise à niveau si vous passez de React Email 5.0.
2. Installez l’éditeur séparément (l’éditeur n’est pas inclus dans le package unifié react-email) :
   • npm i @react-email/editor
3. Intégrez l’éditeur dans votre app React :
   • Importez EmailEditor depuis @react-email/editor et affichez-le dans un composant.
4. Personnalisez le style de l’éditeur (optionnel) :
   • Importez le CSS du thème par défaut (@react-email/editor/themes/default.css) ou appliquez votre propre thème.
5. Personnalisez l’éditeur (optionnel) :
   • Utilisez l’API composable (EmailNode) pour définir des blocs personnalisés incluant l’analyse HTML (parseHTML) et la génération de sortie (renderToReactEmail).
6. Démarrez à partir de modèles :
   • Utilisez les modèles fournis comme base, ou importez des sections individuelles dans vos propres modèles React Email.

Cas d’usage

• Intégrer un compositeur d’e-mails dans une web app : Ajoutez un éditeur visuel à un tableau de bord pour que les utilisateurs créent du contenu e-mail directement dans votre produit.
• Créer des blocs de contenu personnalisés pour workflows spécifiques : Créez des blocs comme un encadré, un téléchargeur média, des posts sociaux intégrés ou des graphiques inline en définissant un EmailNode.
• Standardiser les modèles pour types d’e-mails courants : Utilisez les nouveaux modèles de flux d’authentification et e-commerce pour réduire le temps passé à créer les mises en page initiales.
• Intégrer l’éditeur à votre style UI existant : Importez le thème par défaut pour démarrer rapidement, puis créez un thème personnalisé pour que l’éditeur s’accorde avec votre application.
• Développer une bibliothèque de composants e-mail maintenable : Importez les composants de mise en page et UI courants depuis le package unifié react-email tout en gardant l’éditeur en installation séparée.

FAQ

• L’éditeur est-il inclus dans le package unifié react-email ?
  Non. L’éditeur s’installe séparément sous @react-email/editor.

• Puis-je intégrer l’éditeur directement dans mon app React ?
  Oui. La documentation montre comment importer EmailEditor et l’afficher dans un composant.

• Comment ajouter des blocs personnalisés à l’éditeur ?
  Utilisez l’API composable via EmailNode pour définir l’analyse HTML d’un bloc (parseHTML) et sa sortie de rendu React Email (renderToReactEmail).

• Où trouver les nouveaux modèles ?
  Les modèles sont disponibles comme modèles React Email et fichiers Figma, incluant authentification et e-commerce.

• Quelles sont les différences lors de la mise à niveau de React Email 5.0 vers 6.0 ?
  Les étapes de mise à niveau suppriment @react-email/components et @react-email/preview-server, installent react-email@latest et @react-email/ui@latest, et mettent à jour les imports pour utiliser react-email au lieu de @react-email/components.

Alternatives

• Éditeurs/builders HTML e-mail génériques (non-React) : Utiles si vous avez besoin seulement d’une UI d’éditeur sans flux de composants React, mais vous perdez le modèle d’intégration React Email.
• Bibliothèques e-mail React template-first : Si vous n’avez pas besoin d’un éditeur visuel intégré dans votre app, vous pouvez vous appuyer sur des composants/modèles React sans extensibilité d’éditeur.
• Éditeurs WYSIWYG exportant du HTML : Ils peuvent produire de la sortie HTML e-mail, mais ne proposent pas la même approche de nœuds composables pour intégrer des blocs personnalisés spécifiques à l’éditeur dans un flux React Email.
• Outils de design avec conversion manuelle vers markup e-mail : Les équipes Figma-first peuvent créer des mises en page dans Figma et les implémenter manuellement en code e-mail ; cela diffère de l’utilisation directe des modèles React Email et de la génération de sortie e-mail via le flux de l’éditeur.