Comments (2)
chromakode
commented on September 2, 2024
Is it possible to separate the injectReactEmailAttributes functionality from the other stuff?
You mean as a separate package? This is totally a hack (and might be difficult to maintain stability), but I could see it being useful separated out. It's a little tricky to pin down the right level of generalization though -- would it still just be for email attributes? Do you want a default set of attributes injected, or do you want to supply your own?
If you're just importing the lib for your own code, it's already a one-liner. All you really need for the attribute injection is:
DOMProperty.injection.injectDOMPropertyConfig({
Properties: {
'xmlns': 0,
'align': 0,
'valign': 0,
'bgcolor': 0,
'border': 0,
/* any other attributes you care about */
},
})Is that worth having a separate dep for to you? Perhaps so that it manages the hacks across React versions?
Furthermore I don't believe it's wise to set the head in react/jsx. Email head elements can get really complex so it should just be a string IMO.
Yes, I agree that the <head> content is highly specific to your use-case. The philosophy of this library is to have a sane default with batteries included, since part of the difficulty of writing HTML emails is onboarding all of the legacy cruft that goes into formatting them. The intent is that once you have specific requirements for your wrapper component, you can use your own.
from react-html-email.
nicobrinkkemper
commented on September 2, 2024
Hey dude,
Appreciate the response. However I have chosen a different approach to do emails+JSX+React+Typescript. My solution doesn't inject anything because it was just too hacky for Typescript and React to play nice. Instead I use custom components which by default do not parse any of the attributes/props. I will give you an example, you might want to consider it as an alternative to prop injection:
<legacy-table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<if-mso-600>
<legacy-table width="100%" cellpadding="0" cellspacing="0"
border="0"
stringStyle="width: 100%; max-width:600px;"
align="center">
<tbody>
<tr>
<legacy-td {...{
width: "100%",
align: "left",
bgcolor:'#FFF',
style: {
color:'#111',
textAlign:'left',
padding:'12px 0px 0px 0px'
}
}}>
<Preheader>
{preheader}
</Preheader>
{children}
</legacy-td>
</tr>
</tbody>
</legacy-table>
</if-mso-600>
</td>
</tr>
</tbody>
</legacy-table>
then later in my code I apply this epic email fix, which does the trick:
export function emailify(content:string){
const ifMso_600_Start = `<!--[if mso]><center><table><tr><td width="600"><![endif]-->`;
const ifMso_Col_1_Start = `<!--[if mso]><center><table><tr><td width="99%"><![endif]-->`;
const ifMso_Col_2_Start = `<!--[if mso]><center><table><tr><td width="49%"><![endif]-->`;
const ifMso_Col_3_Start = `<!--[if mso]><center><table><tr><td width="32.333%"><![endif]-->`;
const ifMso_End = `<!--[if mso]></td></tr></table></center><![endif]-->`;
return content.split('stringStyle')
.join('style')
.split('<if-mso-600>')
.join(ifMso_600_Start)
.split('</if-mso-600>')
.join(ifMso_End)
.split('<if-mso-of-col-1>')
.join(ifMso_Col_1_Start)
.split('</if-mso-of-col-1>')
.join(ifMso_End)
.split('<if-mso-of-col-2>')
.join(ifMso_Col_2_Start)
.split('</if-mso-of-col-2>')
.join(ifMso_End)
.split('<if-mso-of-col-3>')
.join(ifMso_Col_3_Start)
.split('</if-mso-of-col-3>')
.join(ifMso_End)
.split('legacy-')
.join('')
.split('></img>')
.join('/>')
}
from react-html-email.
Related Issues (20)
- Row & Column components HOT 3
- Warnings log even though warn is set to false HOT 3
- Your kitchenSink.jsx doesn't work, should it? HOT 1
- unsupported props warning even when downgrading to 1.2.0 HOT 2
- Webpack build error HOT 2
- Can't build with webpack 3.10 HOT 2
- react-html-email fails to compile when building HOT 11
- is there a full example HOT 2
- Can I use it for server-side-rendering? HOT 1
- Using a number for width and height doesn't give us responsive images
- Are there tests validating cross-client compatibility? HOT 1
- Setting multiple <style> blocks
- Test with enzyme: mount
- Span component does not inherit className prop HOT 1
- [BUG] Default example kitchenSink.jsx does not display well in default Galaxy S6 email client. HOT 2
- [SOLVED] Layout issue - <Box> won't center HOT 1
- Email shows all the html tags and etc HOT 1
- TypeError: Cannot read property 'getCurrentStack' of undefined HOT 1
- Where do static files end up?
- Can I use react-bootstrap with this package?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-html-email.