Usar com React Email

Introdução

React Email é uma biblioteca para montar emails com React. Neste guia você vai usá-la junto com o Madmail.

Instalar as dependências

O SDK no npm se chama usesend-js — é o pacote do projeto open-source que dá origem ao Madmail, e é esse nome que você instala.

npm install usesend-js @react-email/render

Criar um template de email

import * as React from "react";
import { Html } from "@react-email/html";
import { Button } from "@react-email/button";

export function Email(props) {
  const { url } = props;

  return (
    <Html lang="pt-BR">
      <Button href={url}>Clique aqui</Button>
    </Html>
  );
}

Enviar o email pelo Madmail

import { UseSend } from "usesend-js";
import { render } from "@react-email/render";
import { Email } from "./email";

const madmail = new UseSend("us_sua_chave_de_api");

  const html = await render(<Email url="https://www.madmail.com.br" />);

const response = await madmail.emails.send({
  to: "ola@acme.com",
  from: "ola@suaempresa.com.br",
  subject: "Email pelo Madmail",
  html,
});

Compilar o seu projeto

JavaScript

Em Node, importar email.jsx pode falhar. Adicione isto à configuração do Babel:

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Veja este exemplo pronto.

TypeScript

Basta adicionar jsx no seu tsconfig.json:

{
  "compilerOptions": { "jsx": "react-jsx" }
}

Veja este exemplo pronto.