"Componentizar" mensagens de email

[silvaezequias]

Eu adicionei suporte para criar mensagens de email usando JSX apenas usando a biblioteca do React. Com isso dá pra organizar melhor as mensagens de email e customizar elas separadamente.

Como o HTML enviado vai ser por email, não é possível usar bibliotecas pra estilizar o HTML, somente o css padrão usado em componentes React. Exemplo:

const style = {
  text: {
    color: 'red',
    fontWeight: 'bold',
  } 
}

export function MeuComponente({ username }) {
  return (
    <p style={style.text}>
      Olá, {username}! <br />
    </p>
  );
}

Tutorial

Criar um novo componente

Para criar um componente de mensagem é exatamente igual um componente React.

// mail/components/MeuComponente/index.js

export function MeuComponente({ username }) {
  return (
    <p>
      Olá, {username}! <br />
    </p>
  );
}

Agora adicionar esse componente no Renderizador:

// mail/index.js

import ReactDOM from 'react-dom/server';
import { MeuComponente } from './components/MeuComponente/';

function Render(Component, props) {
  return ReactDOM.renderToString(
    <Component {...props} />
  );
};

export default {
  MeuComponente: function(props){
    return Render(MeuComponente, props);
  }
}

Pronto! Agora está pronto para ser usado em qualquer canto da aplicação

// message.test.js

import email from 'infra/email.js';
import Mail from 'mail';

email.send({
  from: 'Filipe Deschamps <[email protected]>',
  to: '[email protected]',
  subject: 'Essa é uma mensagem de teste.',
  html: Mail.MeuComponente({
    username: 'Guga Deschamps',
  }),
});

[vercel[bot]]

@ezequiaslopesdasilva is attempting to deploy a commit to the TabNews Team on Vercel.

A member of the Team first needs to authorize it.

[Rafatcb]

Bom, como o PR está há mais de um ano parado, está com alguns conflitos, e meu comentário ficou sem respostas, estou fechando o PR para organizar o repositório. Caso alguém queira dar continuidade, sugiro criar uma nova branch a partir da main, para evitar conflitos, já implementando o que sugeri como melhoria na revisão do código.

Obrigado pelo PR @silvaezequias!