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

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

【免费下载链接】react-html-emailCreate elegant HTML email templates using React.项目地址: https://gitcode.com/gh_mirrors/re/react-html-email

警告：当前未维护

虽然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构建邮件模板的开发者来说，其提供的功能仍然非常实用。你也可以考虑改进和贡献，使其适应当前的技术环境。

【免费下载链接】react-html-emailCreate elegant HTML email templates using React.项目地址: https://gitcode.com/gh_mirrors/re/react-html-email