E-mails & React

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. 🎉

Compartilhe:
Buy Me A Coffee