Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Saifadin/postonents
React meets Emails | ⚛️ x 📧= 🔥
https://github.com/Saifadin/postonents
components emails hacktoberfest pdf react react-dom ssr typescript ui
Last synced: 15 days ago
JSON representation
React meets Emails | ⚛️ x 📧= 🔥
- Host: GitHub
- URL: https://github.com/Saifadin/postonents
- Owner: Saifadin
- Created: 2018-12-22T16:39:36.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:44:04.000Z (almost 2 years ago)
- Last Synced: 2024-10-18T04:22:32.969Z (25 days ago)
- Topics: components, emails, hacktoberfest, pdf, react, react-dom, ssr, typescript, ui
- Language: TypeScript
- Homepage: https://saifadin.github.io/postonents/
- Size: 1.85 MB
- Stars: 90
- Watchers: 3
- Forks: 6
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - postonents - React meets Emails | ⚛️ x 📧= 🔥 (TypeScript)
- awesome-list - postonents
README
A simple UI library for light-weight, highly customizable Email components. Remove the pain of writing emails, by writing the templates in React, then SSR them and pass the generated HTML to the Backend to send it out.
[](https://badge.fury.io/js/postonents) [](https://github.com/Saifadin/postonents/issues) [](https://github.com/Saifadin/postonents)
## Installation
To start with `postonents` install:
```
yarn add postonents
// or
npm install --save postonents
```
## Simple nodeJS setup
To add postonents to a nodeJS application also add install `react` and `react-dom`.
```
yarn add react react-dom
// or
npm install --save react react-dom
```
This will allow you to write something like this to generate an html string that can be provided to services like sendinblue or mandrill.
```jsx
import React from 'react';
import { renderHtml, Email, PostonentsProvider, Header } from 'postonents';
const Email = ({ email }) => (
);
const getHtml = async () => {
const html = await renderHtml(Email, { email: '[email protected]' });
return html;
};
// Now you can send the email with any email client library/service
```
## Components included
Included in this package are the following components:
- **`Template`**: The Wrapper component, that generates the ``, `` and `` tags with many customization possibilities like adding scripts and global styles.
- **`Container`**: Component to generally wrap `Row`s. By default a max of 600px wide. (for the reason why see [here](http://templates.mailchimp.com/development/html/))
- **`Row`**: Each row has 12 possible `Column`s, that wrap, if they are too big.
- **`Column`**: A Column for content separation, can be customized for `small` (<600px) and `large` (>=600px).
- **`Text`**: Component to display and style text content.
- **`Link`**: Component to display and style links (`a` tag). Can have the look of a link, a primary button and a hollow button.
- **`Image`**: Component for images. Needs a src and either height or width definition.
- **`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.
- **`renderHtml`**: A function that server-side renders your template and returns it as a string.
## Component API
All components generally have a `children`, a `className` and a `style` prop and this will be applied to the element that has the styling for easy overrides and customization
### **`Template`**
| Prop | type | required | description |
| --------------- | ---------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
| `lang` | string | yes | Will be added to the `html` tag |
| `title` | string | yes | The `title` of the email |
| `headAdditions` | array<{ type, children?, props? }> | no | Needs to be an array, with a type (eg. `link`), props and maybe children, internally we do `React.createElement` |
| `headStyles` | string | no | Styles in the `head` tag, will automatically be wrapped in `