推荐使用：react-html-email - 优雅的React邮件模板库

推荐使用：react-html-email - 优雅的React邮件模板库

警告：当前未维护

虽然react-html-email目前处于未维护状态，但随着React的成熟，不再需要专门的库来生成电子邮件特有标记。我们建议您考虑更现代的CSS-in-JS和内联样式组件库作为构建自己邮件设计系统的基础。然而，这个项目中的组件仍可以作为一个有用的起点。

我相信这个项目的未来将是一个通用的设计组件集合，用于电子邮件模板，类似于Chakra UI。如果你有兴趣接手此项目并实现这一愿景，请发送邮件至react-html-email@chromakode.com。

---

1、项目介绍

react-html-email是一个封装了电子邮件中复杂HTML和内联样式的React组件库。它帮助避免在创建现代HTML邮件时常见的陷阱。受到HTML Email Boilerplate的启发，提供了一套标准的600px表格布局组件。

2、项目技术分析

该库扩展了React的受支持标签和属性，包括一些过时但对传统客户端仍然有用的属性。此外，还包含一个风格验证器，基于Campaign Monitor的CSS支持指南检查可能的兼容性问题。

3、项目及技术应用场景

• 创建响应式邮件模板
• 快速构建专业级别的营销邮件
• 在企业内部应用，如通知邮件或订阅服务
• 邮件自动化平台的前端部分

4、项目特点

• 简单易用的React组件：提供如Email, Item, Span, A等组件，让构建邮件模板如同编写React应用一样轻松。
• 默认样式重置与规范化：每个组件都带有基本样式重置，确保跨平台一致显示。
• 兼容性验证：通过配置验证器检查内联样式，确保在主流邮件客户端中的兼容性。
• Head CSS和媒体查询支持：允许向<Email>组件传递headCSS，以添加头部CSS和媒体查询。
• Mailchimp特性：支持添加mc:edit自定义属性，适用于Mailchimp用户。

安装与使用

只需使用npm安装：

$ npm install react-html-email

然后使用renderEmail函数渲染邮件模板：

import { Email, Item, Span, A, renderEmail } from 'react-html-email'

const emailHTML = renderEmail(
  <Email title="Hello World!">
    <Item align="center">
      <Span fontSize={20}>
        这是一个使用:
        <A href="https://github.com/chromakode/react-html-email">react-html-email</A>
        创建的示例邮件。
      </Span>
    </Item>
  </Email>
)

更多示例可在项目examples目录中找到。

虽然项目目前未被维护，但对于需要React构建邮件模板的开发者来说，其提供的功能仍然非常实用。你也可以考虑改进和贡献，使其适应当前的技术环境。