Скачать postonents postonents

postonents

Сторонние компоненты

Set the importHelpers key to false

Скачать

Пост

Простая библиотека пользовательского интерфейса для легких, очень настраиваемых компонентов электронной почты. Удалите боль писать электронные письма, написав шаблоны в 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

Это позволит вам написать что -то подобное, чтобы сгенерировать строку HTML, которая может быть предоставлена таким услугам, как SendInBlue или Mandrill.

 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. По умолчанию максимум шириной 600 пикселей. (По той причине, почему увидеть здесь)
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)	Количество столбцов от 1 до 12 для экранов под 600 пикселей
`large`	число	Нет (по умолчанию к `small)`	Количество столбцов от 1 до 12 для экранов выше 600px
`noPadding`	логический	нет	Удалит заполнение колонны

`Link`

Проп	тип	необходимый	описание
`href`	нить	да	Цель ссылки
`type`	перевозить	Нет (по умолчанию «ссылка»)	Может быть «ссылка», «первичная» или «пустое»
`fullWidth`	логический	нет	Заставляет ссылку расширяться в полной мере

`Image`

Проп	тип	необходимый	описание
`src`	нить	да	Источник изображения
`height`	число	нет	Высота изображения
`width`	число	нет	Ширина изображения

`Header`

Проп	тип	необходимый	описание
`logo`	нить	нет	SRC log, если его пройдут
`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
  } ,
} ;

Примеры

Примеры будут добавляться регулярно и будут видны на страницах GitHub

Часто задаваемые вопросы

Мои столбцы не отображаются после отправки их

Это часто происходит с пользователями Mandrill. Пожалуйста, обратитесь к этой статье в HelpCenter и убедитесь, что автоматическая инлингация CSS деактивирована.

Расширять

Дополнительная информация