@@ -11,7 +11,9 @@ of the output HTML files, and you'll see for yourself why it's such a big deal t
1111
1212React Email exposes a handful of primitives documented on their [ website] ( https://react.email/docs/introduction ) .
1313If 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 )
1517
1618### Preview and build
1719While 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
3739This also applies to the layout; always prefer React Email's ` Container ` , ` Row ` and ` Column ` elements for layout.
3840They'll get turned into ugly HTML tables to do the layout - just like in the good ol' HTML days...
3941
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.
4346
44- The layout takes 2 properties:
47+ The classic layout ( ` ClassicLayout.tsx ` ) takes 3 properties:
4548- ` subject ` (required): displayed in the header of the email and be used to construct the actual email subject
4649- ` sendReason ` (required): important for anti-spam laws and must reflect the reason why a given email is sent
4750 - Is it because they have an account? Is it because they enabled notifications? ...
4851- ` extra ` (optional): displayed at the very bottom, useful to insert an unsubscribe link if necessary
4952
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.
5155
5256## Utility components
5357This 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
5862< a data- th- href= " ${link}" > Click here! < / a>
5963```
6064
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 ` .
6267
6368### ` <LocalizedText /> ` and ` t() `
6469Most 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:
175180- ` instanceQualifier ` : Either "Tolgee" for Tolgee Cloud, or the domain name used for the instance
176181- ` instanceUrl ` : Base URL of the instance
177182
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 .
179184The 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