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