Como já mencionei aqui no blog, criar templates de e-mail é como voltar aos anos 90. É necessário utilizar tabelas e outros recursos bem antigos do HTML, e a maioria dos cliente de e-mail não suportam propriedades CSS mais modernas.
Bom, estamos em 2023 e é hora de repaginar a criação de emails.
React Email
Uma ferramenta muito interessante que me chamou a atenção e que tenho testado nos últimos meses é a React Email. Ela transforma totalmente o ambiente relatado no post que mencionei acima e nos traz para uma época que temos ferramentas poderosas como React e TypeScript.
O React Email nos traz uma série de componentes sem estilo para construir nossos e-mails utilizando React e TypeScript.
Para utilizar o React Email é bem simples:
1. Pacotes NPM:
Adicione os pacotes necessários ao seu projeto:
yarn add react-email @react-email/components -E
2. Scripts NPM:
Adicione os seguintes scripts ao seu package.json:
{
"scripts": {
"emails:dev": "email dev",
"emails:export": "email export",
}
}
3. Criando o template:
Crie o seu template .tsx em uma pasta chamada emails utilizando a documentação:
// Exemplo: ./emails/exemplo.tsx
import { Button } from '@react-email/button';
import { Html } from '@react-email/html';
import * as React from 'react';
export default function Email() {
return (
<Html>
<Button
pX={20}
pY={12}
href="https://example.com"
style={{ background: '#000', color: '#fff' }}
>
Click me
</Button>
</Html>
);
}
Se for necessário, você pode especificar outra pasta utilizando a flag --dir no comando email: email dev --dir=another_folder
4. Testando:
Execute o projeto localmente para visualizar as mudanças no seu template:
yarn emails:dev
5. Exportando o HTML:
Para exportar o HTML final, você pode executar o comando export:
yarn emails:export
Pronto, agora é so continuar enriquecendo o seu e-mail utilizando os componentes da própria documentação do React Email. 🎉
