React Email est une bibliothèque de création de modèles, pas un expéditeur. Vous écrivez votre e-mail sous forme de composant React avec @react-email/components, vous appelez render() pour le convertir en chaîne HTML, puis vous transmettez ce HTML à n'importe quel fournisseur d'e-mail pour l'envoyer. Cette séparation est importante : React Email gère le balisage (et les différences entre clients qui rendent le HTML d'e-mail pénible), tandis qu'un fournisseur distinct se charge de l'envoi. Voici la boucle complète.
Comment construire un modèle d'e-mail ?
Installez les paquets :
npm install @react-email/components @react-email/renderLes composants correspondent à du HTML compatible avec les clients de messagerie et gèrent pour vous les styles en ligne et les mises en page en tableaux. Un modèle de reçu simple, acceptant des props pour pouvoir le réutiliser :
// emails/Receipt.tsx
import { Html, Head, Body, Container, Heading, Text } from "@react-email/components";
type ReceiptProps = {
name: string;
total: string;
};
export function Receipt({ name, total }: ReceiptProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "sans-serif" }}>
<Container>
<Heading>Thanks, {name}</Heading>
<Text>Your order total was {total}.</Text>
</Container>
</Body>
</Html>
);
}Comme il s'agit simplement de React, vous composez, bouclez et passez des props comme vous le feriez dans n'importe quel composant, puis vous prévisualisez le résultat localement avant tout envoi.
Comment transformer le composant en HTML ?
render() prend l'élément et renvoie une chaîne HTML. La fonction peut aussi produire une version en texte brut, que vous devriez inclure comme alternative textuelle :
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const html = await render(<Receipt name="Alex" total="$42.00" />);
const text = await render(<Receipt name="Alex" total="$42.00" />, {
plainText: true,
});À ce stade, vous disposez d'une chaîne HTML. Le travail de React Email est terminé. Rien n'a encore été envoyé ; vous avez besoin d'un fournisseur pour cela.
Envoyer avec Bird
Passez le HTML généré directement dans l'API e-mail Bird API. La sortie du composant devient le champ html :
import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });
const html = await render(<Receipt name="Alex" total="$42.00" />);
const { data, error } = await bird.email.send({
from: "you@yourdomain.com",
to: ["delivered@bird.dev"],
subject: "Your receipt",
html,
}).safe();L'adresse sandbox delivered@bird.dev accepte toujours le courrier, ce qui vous permet de vérifier à la fois le modèle et l'envoi en une seule exécution. Ce schéma s'intègre facilement dans une fonction serverless, comme décrit dans comment envoyer un e-mail sur Vercel. Si vous préférez envoyer via SMTP, la même chaîne html fonctionne avec Nodemailer.
FAQ
Est-ce que React Email envoie l'e-mail ?
Non. Il construit le modèle et le transforme en HTML et en texte brut. L'envoi est une étape séparée, prise en charge par un fournisseur tel qu'un serveur SMTP ou une API e-mail API.
Pourquoi utiliser React Email au lieu d'écrire du HTML à la main ?
Le HTML d'e-mail doit fonctionner sur des clients qui prennent en charge des sous-ensembles très différents de CSS, ce qui impose généralement des tableaux imbriqués et des styles en ligne. Les composants de React Email produisent ce balisage pour vous : vous écrivez des composants et obtenez une sortie compatible avec les clients de messagerie.
Puis-je réutiliser un modèle avec des données différentes ?
Oui. Les modèles sont des composants React, ils acceptent donc des props. Générez le même composant avec des valeurs différentes pour chaque destinataire, puis envoyez chaque résultat.
React Email et une API d'envoi API se partagent le travail de manière claire : l'un met en forme le message, l'autre le distribue. Pour une gestion des modèles côté envoi, consultez les modèles d'e-mails Bird.