react-email
react-email copied to clipboard
Published
20 hours ago •
resendlabs
resendlabs
feat(html-comment): Add components for handling html comments and outlook conditional comments
#1584
It use comment placeholders for each variant of possible usage: regular html comment, mso and non-mso comments with version and conditions support, ghost wrappers for mso and non-mso. Render method should be wrapped by replaceCommentPlaceholders to replace all placeholders by comments
Example
<div>
<Comment>comment</Comment>
<Mso>
<div>mso content</div>
</Mso>
<NonMso>
<div>non-mso content</div>
</NonMso>
<MsoGhost
ghostWrapper={(children) => (
<table>
<tr>
<td>{children}</td>
</tr>
</table>
)}
>
<div>content</div>
</MsoGhost>
<NonMsoGhost
ghostWrapper={(children) => (
<table>
<tr>
<td>{children}</td>
</tr>
</table>
)}
>
<div>content</div>
</NonMsoGhost>
</div>
Output
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div><!--comment--><!--[if mso]><div>mso content</div><![endif]--><!--[if !mso]><!--><div>non-mso content</div><!--<![endif]--><!--[if mso]><table><tr><td><![endif]--><div>content</div><!--[if mso]></td></tr></table><![endif]--><!--[if !mso]><!--><table><tr><td><!--<![endif]--><div>content</div><!--[if !mso]><!--></td></tr></table><!--<![endif]--></div>
Problems
replaceCommentPlaceholders should be used in render method, but it another lib and I'm not sure how i can use it with this structure
