React Email é uma biblioteca de templates, não um serviço de envio. Você escreve seu e-mail como um componente React usando @react-email/components, chama render() para transformá-lo em uma string HTML e então entrega esse HTML a qualquer provedor de e-mail para enviar. Essa separação importa: React Email cuida da marcação (e das inconsistências entre clientes que tornam o HTML de e-mail difícil), enquanto um provedor separado faz o envio. Veja o fluxo completo.
Como criar um template de e-mail?
Instale os pacotes:
npm install @react-email/components @react-email/renderOs componentes correspondem a HTML compatível com e-mail e cuidam de estilos inline e layouts de tabela para você. Um template simples de recibo, aceitando props para que você possa reutilizá-lo:
// 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>
);
}Como é apenas React, você compõe, itera e passa props da mesma forma que faria em qualquer componente, e pode visualizar localmente antes de enviar.
Como renderizar o componente em HTML?
render() recebe o elemento e retorna uma string HTML. Também pode gerar uma versão em texto puro, que você deve incluir como alternativa de texto:
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,
});Neste ponto você tem uma string de HTML. O trabalho do React Email está feito. Nada foi enviado ainda; você precisa de um provedor para isso.
Envie com Bird
Passe o HTML renderizado diretamente para a Bird email API. A saída do componente se torna o campo 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();O endereço sandbox delivered@bird.dev sempre aceita e-mails, então você pode confirmar tanto o template quanto o envio em uma só execução. Esse padrão se encaixa facilmente em uma função serverless, o que é abordado em como enviar e-mail no Vercel. Se você preferir enviar via SMTP, a mesma string html funciona com Nodemailer.
Perguntas frequentes
O React Email envia o e-mail?
Não. Ele cria o template e o renderiza em HTML e texto puro. O envio é uma etapa separada, feita por um provedor como um servidor SMTP ou uma API de e-mail.
Por que usar React Email em vez de escrever HTML manualmente?
O HTML de e-mail precisa funcionar em clientes que suportam subconjuntos muito diferentes de CSS, o que geralmente significa tabelas aninhadas e estilos inline. Os componentes do React Email geram essa marcação para você, então você escreve componentes e obtém uma saída compatível com e-mail.
Posso reutilizar um template com dados diferentes?
Sim. Templates são componentes React, então aceitam props. Renderize o mesmo componente com valores diferentes para cada destinatário e envie cada resultado.
React Email e um API de envio dividem o trabalho de forma clara: um formata a mensagem, o outro entrega. Para templates gerenciados no lado do envio, consulte templates de e-mail Bird.