postonents下载 - postonents源代码下载

postonents

三方组件

Set the importHelpers key to false

下载

一个简单的UI库，用于轻巧，高度可自定义的电子邮件组件。通过在React中编写模板，然后SSR，然后将生成的HTML传递给后端以将其发送出去，以删除编写电子邮件的痛苦。

安装

首先要安装postonents 。

 yarn add postonents
// or
npm install --save postonents

简单的nodejs设置

要在Nodejs应用程序中添加后部分组，还添加了安装react和react-dom 。

 yarn add react react-dom
// or
npm install --save react react-dom

这将使您能够编写类似的内容来生成一个可以提供给SendInblue或Mandrill等服务的HTML字符串。

 import React from 'react' ;
import { renderHtml , Email , PostonentsProvider , Header } from 'postonents' ;

const Email = ( { email } ) => (
  < PostonentsProvider >
    < Email title = { `Verification email for ${ email } ` } >
      < Header logo = "https://assets.airbnb.com/press/logos/NBC%20Logo.gif" logoHeight = { 50 } style = { { marginBottom : 24 } } />
    </ Email >
  </ PostonentsProvider >
) ;

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

包括组件

此软件包中包括以下组件：

Template ：生成<html> ， <head>和<body>标签的包装组件，具有许多自定义可能性，例如添加脚本和全局样式。
Container ：通常包装Row s的组件。默认情况下，最大为600px宽。（出于原因，请参见此处）
Row ：每行都有12 Column S，如果它们太大，则包裹。
Column ：用于内容分离的列可以针对small （<600px）和large （> = 600px）定制。
Text ：显示和样式文本内容的组件。
Link ：显示和样式链接的组件（ a ）。可以具有链接，主按钮和空心按钮的外观。
Image ：图像的组件。需要SRC以及高度或宽度定义。
Header ， Footer ：两个用于布局的布局组件
FullWidth ：基本上是一个Container和一个Row 。如果需要不同的背景色，则在顶层进行布局。
PostonentsProvider ， PostonentsConsumer和PostonentContext ：访问或更改用于样式组件的内部上下文的多种可能方法。
renderHtml ：服务器端的功能呈现您的模板并将其返回为字符串。

组件API

所有组件通常都有一个children ，一个className和style道具，这将应用于具有易于覆盖和自定义的样式的元素

`Template`

支柱	类型	必需的	描述
`lang`	细绳	是的	将添加到`html`标签中
`title`	细绳	是的	电子邮件的`title`
`headAdditions`	数组<{类型，孩子？，道具？ }>	不	需要是一个阵列，具有类型（例如`link` ），道具或可能的孩子，我们在内部做出`React.createElement`
`headStyles`	细绳	不	`head`标签中的样式将自动包裹在`<styles type="text/css>`
`bodyStyle`	目的	不	将添加到`body`标签的样式中

`Container`

支柱	类型	必需的	描述
`alignment`	细绳	不	通过此处通过`center` ，以确保容器是居中的，并且不左对齐
`maxWidth`	数字\|细绳	否（默认为600）	将设置整个容器的最大宽度

`Column`

支柱	类型	必需的	描述
`small`	数字	否（默认为12）	在600px下屏幕的1到12的列计数
`large`	数字	否（默认为`small)`	屏幕高于600px的列计数从1到12
`noPadding`	布尔	不	将删除列的填充

`Link`

支柱	类型	必需的	描述
`href`	细绳	是的	链接的目标
`type`	枚举	否（默认为“链接”）	可以是“链接”，“主要”或“空心”
`fullWidth`	布尔	不	使链接扩展到最大

`Image`

支柱	类型	必需的	描述
`src`	细绳	是的	图像的来源
`height`	数字	不	图像的高度
`width`	数字	不	图像的宽度

`Header`

支柱	类型	必需的	描述
`logo`	细绳	不	log的src，如果通过的话将在电子邮件顶部水平呈现一个徽标
`title`	细绳	不	如果通过，将在徽标下渲染标题。
`children`	节点	不	对于自定义样式，您可以通过任何想要的东西

`renderHtml(Template, emailData, headStyles)`

争论	类型	必需的	描述
`Template`	节点	是的	模板组件
`emailData`	目的	不	emaildata将作为道具传播到树上的最高组件
`headStyles`	细绳	不	对于全球样式，您可以通过在此处进入头部的样式

主题

如果您没有特殊和自定义的造型目的，则默认主题将足够。但是，如果您想要更多的控制权，这就是可以通过将其作为theme道具将其传递给PostonentsProvider主题，这需要成为第一个元素：

 < PostonentsProvider theme = { { ... } } >
  < Template >
    ...
  </ Template >
</ PostonentsProvider >

这是当前的主题，将来可能会扩展。

 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
  } ,
} ;