add renderEmail Functionality

Saifadin · Dec 25, 2018 · 980c4af · 980c4af
1 parent 53f4939
commit 980c4af
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,25 +1,25 @@
 {
   "./dist/postonents.cjs.production.js": {
-    "bundled": 10107,
-    "minified": 6265,
-    "gzipped": 1908
+    "bundled": 10682,
+    "minified": 6641,
+    "gzipped": 2086
   },
   "./dist/postonents.cjs.development.js": {
-    "bundled": 10107,
-    "minified": 6265,
-    "gzipped": 1908
+    "bundled": 10682,
+    "minified": 6641,
+    "gzipped": 2086
   },
   "dist/postonents.esm.js": {
-    "bundled": 9172,
-    "minified": 5420,
-    "gzipped": 1760,
+    "bundled": 9678,
+    "minified": 5736,
+    "gzipped": 1930,
     "treeshaked": {
       "rollup": {
-        "code": 431,
-        "import_statements": 51
+        "code": 456,
+        "import_statements": 76
       },
       "webpack": {
-        "code": 1493
+        "code": 1551
       }
     }
   }

diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@ Included in this package are the following components:
 - **`Header`**, **`Footer`**: Two Layout Components for Layouting
 - **`FullWidth`**: Basically a `Container` and a `Row`. For layouting on the top level, if different backgroundColors are wanted.
 - **`PostonentsProvider`**, **`PostonentsConsumer`** and **`PostonentContext`**: Multiple possible ways to access or change the internal Context for styling components.
+- **`renderEmail`**: A function that server-side renders your template and returns it as a string.
 
 ## Component API
 
@@ -84,6 +85,14 @@ All components generally have a `children`, a `className` and a `style` prop and
 | `title`    | string | no       | if passed, will render the title, right under the logo.                                |
 | `children` | Node   | no       | For custom styling you can pass whatever you want                                      |
 
+### **`renderEmail(Template, emailData, headStyles)`**
+
+| Argument     | type   | required | description                                                               |
+| ------------ | ------ | -------- | ------------------------------------------------------------------------- |
+| `Template`   | Node   | yes      | The Template Component                                                    |
+| `emailData`  | object | no       | emailData will be spread as props to the uppermost component in your tree |
+| `headStyles` | string | no       | For global styling you can pass styles that go into the head here         |
+
 ## Theming
 
 If you do not have special and custom styling purposes, the default theme will be more then enough. But if you would like some more control, this is the theme that can be overriden, by passing it as a `theme` prop to `PostonentsProvider`, that need to be the first element:

diff --git a/src/index.tsx b/src/index.tsx
@@ -9,3 +9,4 @@ export * from './Text';
 export * from './Link';
 export * from './Image';
 export * from './ThemeContext';
+export * from './renderEmail';
diff --git a/src/renderEmail.tsx b/src/renderEmail.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+export const renderEmail = (Template: React.FunctionComponent, emailData: object, headStyles: string): string => {
+  const docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
+  const props: any = { headStyles, ...emailData };
+  const templateElement = React.createElement(Template, { ...props });
+  const content = ReactDOMServer.renderToStaticMarkup(templateElement);
+
+  return `${docType}${content}`;
+};