@@ -11,7 +11,9 @@ of the output HTML files, and you'll see for yourself why it's such a big deal t
11
11
12
12
React Email exposes a handful of primitives documented on their [ website] ( https://react.email/docs/introduction ) .
13
13
If you need real world examples, they provide a bunch of great examples based on real-world emails written using
14
- React Email [ here] ( https://demo.react.email/preview/stack-overflow-tips ) .
14
+ React Email [ here] ( https://demo.react.email/preview/newsletters/stack-overflow-tips ) .
15
+
16
+ They also provide a handful of components [ here] ( https://react.email/components )
15
17
16
18
### Preview and build
17
19
While working on emails, you can use ` npm run dev ` to spin up a dev server and have a live preview of the emails in
@@ -37,17 +39,19 @@ fine to send and what isn't; basically the [Can I Use](https://caniuse.com/) of
37
39
This also applies to the layout; always prefer React Email's ` Container ` , ` Row ` and ` Column ` elements for layout.
38
40
They'll get turned into ugly HTML tables to do the layout - just like in the good ol' HTML days...
39
41
40
- ## Base layout
41
- The base layout is available in ` components/Layout.tsx ` . All components should use it, as it'll include the base
42
- Tailwind configuration and all the main elements.
42
+ ## Layouts
43
+ The core shell of emails is provided by ` components/layouts/LayoutCore.tsx ` . It is not expected to be used as-is, but
44
+ instead to serve as a shared base for more complete layouts such as ` ClassicLayout.tsx ` . All emails should use a layout,
45
+ or at least must use the core layout as it contains important building blocks for emails to work properly.
43
46
44
- The layout takes 2 properties:
47
+ The classic layout ( ` ClassicLayout.tsx ` ) takes 3 properties:
45
48
- ` subject ` (required): displayed in the header of the email and be used to construct the actual email subject
46
49
- ` sendReason ` (required): important for anti-spam laws and must reflect the reason why a given email is sent
47
50
- Is it because they have an account? Is it because they enabled notifications? ...
48
51
- ` extra ` (optional): displayed at the very bottom, useful to insert an unsubscribe link if necessary
49
52
50
- These three properties are generally expected to receive output from the ` t() ` function documented below.
53
+ These three properties are generally expected to receive output from the ` t() ` function documented below. The core
54
+ layout only requires the subject.
51
55
52
56
## Utility components
53
57
This is note is left here for the lack of a better section: whenever you need a dynamic properties (e.g. href that
@@ -58,7 +62,8 @@ takes the value of a variable), you can prefix your attribute with `data-th-` an
58
62
< a data- th- href= " ${link}" > Click here! < / a>
59
63
```
60
64
61
- A few base components with default styles are available in ` components/parts ` , such as buttons.
65
+ A few low-level base components with default styles are available in ` components/atoms ` , such as buttons.
66
+ Shared parts are found in ` components/parts ` .
62
67
63
68
### ` <LocalizedText /> ` and ` t() `
64
69
Most if not all text in emails are expected to be wrapped in ` <LocalizedText /> ` (or ` t() ` when more appropriate).
@@ -175,5 +180,13 @@ The following global variables are available:
175
180
- ` instanceQualifier ` : Either "Tolgee" for Tolgee Cloud, or the domain name used for the instance
176
181
- ` instanceUrl ` : Base URL of the instance
177
182
178
- They still need to be passed as demo values except for localized strings where a default value is provided.
183
+ They still need to be passed as demo values, except for localized strings as a default value is provided then .
179
184
The default value can be overridden.
185
+
186
+ ## Tips & tricks
187
+ How the social icons were generated:
188
+ - Get SVG from https://simpleicons.org/
189
+ - Write to ` [file].svg `
190
+ - Add ` width="16" height="16" fill="#a0a0a0" ` to the ` <svg> ` tag
191
+ - Convert SVG to PNG
192
+ - Drink a deserved coffee
0 commit comments