postonents
Advanced tools
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.
To start with postonents install:
yarn add postonents
// or
npm install --save postonents
Included in this package are the following components:
Template: The Wrapper component, that generates the <html>, <head> and <body> tags with many customization possibilities like adding scripts and global styles.Container: Component to generally wrap Rows. By default a max of 600px wide. (for the reason why see here)Row: Each row has 12 possible Columns, 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 LayoutingFullWidth: 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.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 <styles type="text/css> |
bodyStyle | object | no | will be added to the styles of the body tag |
Container| Prop | type | required | description |
|---|---|---|---|
alignment | string | no | Pass center here to make sure the Container is centered and not left-aligned |
maxWidth | number | string | no (defaults to 600) | Will set the max-width of the whole container |
Column| Prop | type | required | description |
|---|---|---|---|
small | number | no (defaults to 12) | The column count from 1 to 12 for screens under 600px |
large | number | no (defaults to small) | The column count from 1 to 12 for screens above 600px |
noPadding | boolean | no | Will remove the padding of the column |
Link| Prop | type | required | description |
|---|---|---|---|
href | string | yes | Target of the link |
type | enum | no (defaults to 'link') | Can be 'link', 'primary' or 'hollow' |
fullWidth | boolean | no | Makes the Link expand to the fullest |
Image| Prop | type | required | description |
|---|---|---|---|
src | string | yes | The source of the image |
height | number | no | The height of the image |
width | number | no | The width of the image |
Header| Prop | type | required | description |
|---|---|---|---|
logo | string | no | src of log, if passed will render a logo horizontally centered at the top of the email |
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 |
renderHtml(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 |
If you do not have special and custom styling purposes, the default theme will be more than 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:
<PostonentsProvider theme={{ ... }}>
<Template>
...
</Template>
</PostonentsProvider>
This is the current theme, it may be extended in the future.
const DefaultTheme = {
colors: {
text: '#4c5b5c', // Txxt Color
bodyBg: '#fafafa', // Background Color of `body`
footerBg: '#4c5b5c', // Background Color of footer
footerText: 'white', // Text Color of Footer
primaryBg: '#6699cc', // Background Color of primary button
primary: 'white', // text color of primary button
hollow: '#4c5b5c', // text color and border color of hollow button
},
typo: {
fontFamily: 'Helvetica, sans-serif', // Font family
fontSize: '14px', // Font Size
lineHeight: '24px', // line height
light: 300, // definition for light font weight
normal: 400, // definition for normal font weight
bold: 600, // definition for bold font weight
},
};
Examples will be added regularly and will be visible on Github Pages
My columns are not showing up after sending them out
This happens a lot with Mandrill Users. Please refer to this article in the HelpCenter and make sure automatic CSS inlining is deactivated.
FAQs
Components for Emails
The npm package postonents receives a total of 42 weekly downloads. As such, postonents popularity was classified as not popular.
We found that postonents demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.