postonents postonentsダウンロード-Postonentsソースコードのダウンロード

postonents

サードパーティ製コンポーネント

Set the importHelpers key to false

ダウンロード

ポストネント

軽量で高度にカスタマイズ可能な電子メールコンポーネント用のシンプルなUIライブラリ。電子メールを書くことの痛みを削除して、反応でテンプレートを書いてから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> 、<html>、 <head> 、 <body>タグを生成するラッパーコンポーネントは、スクリプトやグローバルスタイルの追加など、多くのカスタマイズの可能性を備えたタグを生成します。
Container ：一般的にRowをラップするコンポーネント。デフォルトでは、最大600px幅です。（理由からこちらを参照）
Row ：各行には、大きすぎる場合は、12の可能なColumn sがあります。
Column ：コンテンツ分離用の列は、 small （<600px）およびlarge （> = 600px）にカスタマイズできます。
Text ：テキストコンテンツを表示およびスタイルするコンポーネント。
Link ：リンクを表示およびスタイルするコンポーネント（ a ）。リンク、プライマリボタン、中空ボタンの外観を持つことができます。
Image ：画像のコンポーネント。 SRCと高さまたは幅の定義のいずれかが必要です。
Header 、 Footer ：レイアウト用の2つのレイアウトコンポーネント
FullWidth ：基本的にContainerとRow 。さまざまなバックグラウンドカラーが必要な場合は、トップレベルのレイアウト用。
PostonentsProvider 、 PostonentsConsumer 、およびPostonentContext ：スタイリングコンポーネントの内部コンテキストにアクセスまたは変更する複数の可能な方法。
renderHtml ：サーバー側がテンプレートをレンダリングし、文字列として返す関数。

コンポーネントAPI

一般に、すべてのコンポーネントにはchildren 、 className 、 style小道具があり、これは簡単なオーバーライドとカスタマイズのためのスタイリングを備えた要素に適用されます

`Template`

小道具	タイプ	必須	説明
`lang`	弦	はい	`html`タグに追加されます
`title`	弦	はい	電子メールの`title`
`headAdditions`	array <{type、children？、小道具？ }>	いいえ	タイプ（ `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`	弦	いいえ	ログのSRC、渡された場合、電子メールの上部にあるロゴが水平に中央に置かれます
`title`	弦	いいえ	渡された場合、ロゴのすぐ下でタイトルをレンダリングします。
`children`	ノード	いいえ	カスタムスタイリングの場合、必要なものは何でも渡すことができます

`renderHtml(Template, emailData, headStyles)`

口論	タイプ	必須	説明
`Template`	ノード	はい	テンプレートコンポーネント
`emailData`	物体	いいえ	emaildataは、木の最上部コンポーネントに小道具として広がります
`headStyles`	弦	いいえ	グローバルなスタイリングのために、ここで頭に入るスタイルを渡すことができます

テーマ

特別なスタイリングの目的がない場合は、デフォルトのテーマで十分です。しかし、もう少しコントロールしたい場合は、これは、 PostonentsProviderにthemeの小道具として渡すことで、最初の要素である必要があるテーマであるテーマです。

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