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> , <head> 및 <body> 태그를 생성하는 래퍼 구성 요소.
Container : 일반적으로 Row 랩핑하는 구성 요소. 기본적으로 최대 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`	배열 <{type, children?, props? }>	아니요	유형 (예 : `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의 SRC는 이메일 상단에 로고가 수평 중심으로 렌더링됩니다.
`title`	끈	아니요	통과하면 로고 바로 아래에 제목을 렌더링합니다.
`children`	마디	아니요	맞춤형 스타일을 위해 원하는 것을 전달할 수 있습니다

`renderHtml(Template, emailData, headStyles)`

논쟁	유형	필수의	설명
`Template`	마디	예	템플릿 구성 요소
`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
  } ,
} ;