Download postonents - download do código fonte postonents

postonents

Componentes de terceiros

Set the importHelpers key to false

Baixar

Postental

Uma biblioteca de interface do usuário simples para componentes de email leves e altamente personalizáveis. Remova a dor de escrever e -mails, escrevendo os modelos no React, depois os SSR e passe o HTML gerado para o back -end para enviá -lo.

Instalação

Para começar com a instalação postonents :

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

Configuração simples do NodeJS

Para adicionar post-efeitos a um aplicativo NODEJS, também adicione react e react-dom de Instalação.

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

Isso permitirá que você escreva algo assim para gerar uma sequência HTML que pode ser fornecida a serviços como SendinBlue ou 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

Componentes incluídos

Incluídos neste pacote estão os seguintes componentes:

Template : o componente do wrapper, que gera as tags <html> , <head> e <body> com muitas possibilidades de personalização, como adicionar scripts e estilos globais.
Container : Componente para geralmente envolver Row s. Por padrão, um máximo de 600px de largura. (pela razão pela qual ver aqui)
Row : Cada linha possui 12 Column possíveis, que envolvem, se forem muito grandes.
Column : Uma coluna para separação de conteúdo, pode ser personalizada para small (<600px) e large (> = 600px).
Text : Componente para exibir e estilo conteúdo de texto.
Link : componente para exibir e links de estilo ( a tag). Pode ter a aparência de um link, um botão primário e um botão oco.
Image : Componente para imagens. Precisa de um SRC e definição de altura ou largura.
Header , Footer : dois componentes de layout para layouting
FullWidth : Basicamente, um Container e uma Row . Para o layout no nível superior, se forem desejados diferentes coloridos de fundo.
PostonentsProvider , PostonentsConsumer e PostonentContext : Múltiplas maneiras possíveis de acessar ou alterar o contexto interno para componentes de estilo.
renderHtml : uma função que o lado do servidor renderiza seu modelo e o retorna como uma string.

API do componente

Todos os componentes geralmente têm children , um className e um suporte style e isso será aplicado ao elemento que tem o estilo para facilitar as substituições e a personalização

`Template`

Prop	tipo	obrigatório	descrição
`lang`	corda	sim	Será adicionado à tag `html`
`title`	corda	sim	O `title` do email
`headAdditions`	Array <{tipo, filhos?, adereços? }>	não	Precisa ser uma matriz, com um tipo (por exemplo, `link` ), adereços e talvez crianças, internamente `React.createElement`
`headStyles`	corda	não	Estilos na etiqueta `head` , serão automaticamente envolvidos em `<styles type="text/css>`
`bodyStyle`	objeto	não	será adicionado aos estilos da etiqueta `body`

`Container`

Prop	tipo	obrigatório	descrição
`alignment`	corda	não	`center` aqui para garantir que o contêiner esteja centrado e não alinhado à esquerda
`maxWidth`	número \| corda	Não (padrão para 600)	Definirá a largura máxima de todo o contêiner

`Column`

Prop	tipo	obrigatório	descrição
`small`	número	Não (padrão para 12)	A contagem de colunas de 1 a 12 para telas abaixo de 600px
`large`	número	Não (padrão para `small)`	A contagem de colunas de 1 a 12 para telas acima de 600px
`noPadding`	booleano	não	Removerá o preenchimento da coluna

`Link`

Prop	tipo	obrigatório	descrição
`href`	corda	sim	Alvo do link
`type`	enum	Não (padrão para 'link')	Pode ser 'link', 'primário' ou 'hollow'
`fullWidth`	booleano	não	Faz o link expandir para o máximo

`Image`

Prop	tipo	obrigatório	descrição
`src`	corda	sim	A fonte da imagem
`height`	número	não	A altura da imagem
`width`	número	não	A largura da imagem

`Header`

Prop	tipo	obrigatório	descrição
`logo`	corda	não	O SRC de log, se passado renderizará um logotipo centrado horizontalmente no topo do email
`title`	corda	não	Se aprovado, renderizará o título, logo abaixo do logotipo.
`children`	Nó	não	Para um estilo personalizado, você pode passar o que quiser

`renderHtml(Template, emailData, headStyles)`

Argumento	tipo	obrigatório	descrição
`Template`	Nó	sim	O componente de modelo
`emailData`	objeto	não	O emaildata será espalhado como adereços para o componente superior em sua árvore
`headStyles`	corda	não	Para o estilo global, você pode passar estilos que entram na cabeça aqui

Temas

Se você não tiver fins de estilo especial e personalizado, o tema padrão será mais do que suficiente. Mas se você quiser um pouco mais de controle, esse é o tema que pode ser superestimado, passando -o como um suporte theme para PostonentsProvider , que precisa ser o primeiro elemento:

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

Este é o tema atual, pode ser estendido no futuro.

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