{"id":13452546,"url":"https://github.com/Saifadin/postonents","last_synced_at":"2025-03-23T19:34:33.771Z","repository":{"id":33847284,"uuid":"162826993","full_name":"Saifadin/postonents","owner":"Saifadin","description":"React meets Emails | ⚛️ x 📧= 🔥","archived":false,"fork":false,"pushed_at":"2022-12-10T20:44:04.000Z","size":1939,"stargazers_count":90,"open_issues_count":22,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-18T04:22:32.969Z","etag":null,"topics":["components","emails","hacktoberfest","pdf","react","react-dom","ssr","typescript","ui"],"latest_commit_sha":null,"homepage":"https://saifadin.github.io/postonents/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Saifadin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-22T16:39:36.000Z","updated_at":"2024-03-21T04:26:44.000Z","dependencies_parsed_at":"2023-01-15T03:00:21.388Z","dependency_job_id":null,"html_url":"https://github.com/Saifadin/postonents","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saifadin%2Fpostonents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saifadin%2Fpostonents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saifadin%2Fpostonents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saifadin%2Fpostonents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Saifadin","download_url":"https://codeload.github.com/Saifadin/postonents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221665405,"owners_count":16860242,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","emails","hacktoberfest","pdf","react","react-dom","ssr","typescript","ui"],"created_at":"2024-07-31T07:01:27.145Z","updated_at":"2024-10-28T18:31:30.338Z","avatar_url":"https://github.com/Saifadin.png","language":"TypeScript","readme":"![Postonent](https://user-images.githubusercontent.com/1507057/50406874-db91d080-07cc-11e9-9c39-8f7cb3b84170.png)\n\nA 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.\n\n[![npm version](https://badge.fury.io/js/postonents.svg)](https://badge.fury.io/js/postonents) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/Saifadin/postonents/issues) [![blazing](https://img.shields.io/badge/Status-Blazing%20%F0%9F%94%A5-brightgreen.svg)](https://github.com/Saifadin/postonents)\n\n## Installation\n\nTo start with `postonents` install:\n\n```\nyarn add postonents\n// or\nnpm install --save postonents\n```\n\n## Simple nodeJS setup\n\nTo add postonents to a nodeJS application also add install `react` and `react-dom`.\n\n```\nyarn add react react-dom\n// or\nnpm install --save react react-dom\n```\n\nThis will allow you to write something like this to generate an html string that can be provided to services like sendinblue or mandrill.\n\n```jsx\nimport React from 'react';\nimport { renderHtml, Email, PostonentsProvider, Header } from 'postonents';\n\nconst Email = ({ email }) =\u003e (\n  \u003cPostonentsProvider\u003e\n    \u003cEmail title={`Verification email for ${email}`}\u003e\n      \u003cHeader logo=\"https://assets.airbnb.com/press/logos/NBC%20Logo.gif\" logoHeight={50} style={{ marginBottom: 24 }} /\u003e\n    \u003c/Email\u003e\n  \u003c/PostonentsProvider\u003e\n);\n\nconst getHtml = async () =\u003e {\n  const html = await renderHtml(Email, { email: 'test@test.com' });\n\n  return html;\n};\n\n// Now you can send the email with any email client library/service\n```\n\n## Components included\n\nIncluded in this package are the following components:\n\n- **`Template`**: The Wrapper component, that generates the `\u003chtml\u003e`, `\u003chead\u003e` and `\u003cbody\u003e` tags with many customization possibilities like adding scripts and global styles.\n- **`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/))\n- **`Row`**: Each row has 12 possible `Column`s, that wrap, if they are too big.\n- **`Column`**: A Column for content separation, can be customized for `small` (\u003c600px) and `large` (\u003e=600px).\n- **`Text`**: Component to display and style text content.\n- **`Link`**: Component to display and style links (`a` tag). Can have the look of a link, a primary button and a hollow button.\n- **`Image`**: Component for images. Needs a src and either height or width definition.\n- **`Header`**, **`Footer`**: Two Layout Components for Layouting\n- **`FullWidth`**: Basically a `Container` and a `Row`. For layouting on the top level, if different backgroundColors are wanted.\n- **`PostonentsProvider`**, **`PostonentsConsumer`** and **`PostonentContext`**: Multiple possible ways to access or change the internal Context for styling components.\n- **`renderHtml`**: A function that server-side renders your template and returns it as a string.\n\n## Component API\n\nAll 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\n\n### **`Template`**\n\n| Prop            | type                               | required | description                                                                                                      |\n| --------------- | ---------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |\n| `lang`          | string                             | yes      | Will be added to the `html` tag                                                                                  |\n| `title`         | string                             | yes      | The `title` of the email                                                                                         |\n| `headAdditions` | array\u003c{ type, children?, props? }\u003e | no       | Needs to be an array, with a type (eg. `link`), props and maybe children, internally we do `React.createElement` |\n| `headStyles`    | string                             | no       | Styles in the `head` tag, will automatically be wrapped in `\u003cstyles type=\"text/css\u003e`                             |\n| `bodyStyle`     | object                             | no       | will be added to the styles of the `body` tag                                                                    |\n\n### **`Container`**\n\n| Prop        | type             | required             | description                                                                    |\n| ----------- | ---------------- | -------------------- | ------------------------------------------------------------------------------ |\n| `alignment` | string           | no                   | Pass `center` here to make sure the Container is centered and not left-aligned |\n| `maxWidth`  | number \\| string | no (defaults to 600) | Will set the max-width of the whole container                                  |\n\n### **`Column`**\n\n| Prop        | type    | required                 | description                                           |\n| ----------- | ------- | ------------------------ | ----------------------------------------------------- |\n| `small`     | number  | no (defaults to 12)      | The column count from 1 to 12 for screens under 600px |\n| `large`     | number  | no (defaults to `small)` | The column count from 1 to 12 for screens above 600px |\n| `noPadding` | boolean | no                       | Will remove the padding of the column                 |\n\n### **`Link`**\n\n| Prop        | type    | required                | description                          |\n| ----------- | ------- | ----------------------- | ------------------------------------ |\n| `href`      | string  | yes                     | Target of the link                   |\n| `type`      | enum    | no (defaults to 'link') | Can be 'link', 'primary' or 'hollow' |\n| `fullWidth` | boolean | no                      | Makes the Link expand to the fullest |\n\n### **`Image`**\n\n| Prop     | type   | required | description             |\n| -------- | ------ | -------- | ----------------------- |\n| `src`    | string | yes      | The source of the image |\n| `height` | number | no       | The height of the image |\n| `width`  | number | no       | The width of the image  |\n\n### **`Header`**\n\n| Prop       | type   | required | description                                                                            |\n| ---------- | ------ | -------- | -------------------------------------------------------------------------------------- |\n| `logo`     | string | no       | src of log, if passed will render a logo horizontally centered at the top of the email |\n| `title`    | string | no       | if passed, will render the title, right under the logo.                                |\n| `children` | Node   | no       | For custom styling you can pass whatever you want                                      |\n\n### **`renderHtml(Template, emailData, headStyles)`**\n\n| Argument     | type   | required | description                                                               |\n| ------------ | ------ | -------- | ------------------------------------------------------------------------- |\n| `Template`   | Node   | yes      | The Template Component                                                    |\n| `emailData`  | object | no       | emailData will be spread as props to the uppermost component in your tree |\n| `headStyles` | string | no       | For global styling you can pass styles that go into the head here         |\n\n## Theming\n\nIf 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:\n\n```jsx\n\u003cPostonentsProvider theme={{ ... }}\u003e\n  \u003cTemplate\u003e\n    ...\n  \u003c/Template\u003e\n\u003c/PostonentsProvider\u003e\n```\n\nThis is the current theme, it may be extended in the future.\n\n```javascript\nconst DefaultTheme = {\n  colors: {\n    text: '#4c5b5c', // Txxt Color\n    bodyBg: '#fafafa', // Background Color of `body`\n    footerBg: '#4c5b5c', // Background Color of footer\n    footerText: 'white', // Text Color of Footer\n    primaryBg: '#6699cc', // Background Color of primary button\n    primary: 'white', // text color of primary button\n    hollow: '#4c5b5c', // text color and border color of hollow button\n  },\n  typo: {\n    fontFamily: 'Helvetica, sans-serif', // Font family\n    fontSize: '14px', // Font Size\n    lineHeight: '24px', // line height\n    light: 300, // definition for light font weight\n    normal: 400, // definition for normal font weight\n    bold: 600, // definition for bold font weight\n  },\n};\n```\n\n## Examples\n\nExamples will be added regularly and will be visible on [Github Pages](https://saifadin.github.io/postonents/)\n\n## FAQs\n\n**My columns are not showing up after sending them out**\n\nThis happens a lot with Mandrill Users. Please refer to this [article in the HelpCenter](https://mandrill.zendesk.com/hc/en-us/articles/205582437-CSS-Inlining) and make sure automatic CSS inlining is deactivated.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSaifadin%2Fpostonents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSaifadin%2Fpostonents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSaifadin%2Fpostonents/lists"}