Descarga posterior postonents - Descarga del código fuente postonents

postonents

Componentes de terceros

Set the importHelpers key to false

Descargar

Postonente

Una biblioteca de interfaz de usuario simple para componentes de correo electrónico ligeros y altamente personalizables. Elimine el dolor de escribir correos electrónicos, escribiendo las plantillas en React, luego SSR y pase el HTML generado al backend para enviarlo.

Instalación

Para comenzar con la instalación postonents :

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

Configuración simple de NodeJS

Para agregar postonentes a una aplicación NodeJS también agregue Instalar react y react-dom .

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

Esto le permitirá escribir algo como esto para generar una cadena HTML que se puede proporcionar a servicios como SendInblue o 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 incluidos

En este paquete se incluyen los siguientes componentes:

Template : el componente de envoltura, que genera etiquetas <html> , <head> y <body> con muchas posibilidades de personalización como agregar scripts y estilos globales.
Container : componente para envolver generalmente Row s. Por defecto, un máximo de 600px de ancho. (Por la razón por la cual ver aquí)
Row : cada fila tiene 12 Column posibles, esa envoltura, si son demasiado grandes.
Column : una columna para la separación de contenido, se puede personalizar para small (<600px) y large (> = 600px).
Text : componente para mostrar y estilo contenido de texto.
Link : Componente para visualizar y enlaces de estilo ( a etiqueta). Puede tener el aspecto de un enlace, un botón primario y un botón hueco.
Image : componente para imágenes. Necesita una definición SRC y de altura o ancho.
Header , Footer : dos componentes de diseño para diseñar
FullWidth : básicamente un Container y una Row . Para diseñar en el nivel superior, si se buscan diferentes pisos de fondo.
PostonentsProvider , PostonentsConsumer y PostonentContext : múltiples formas posibles de acceder o cambiar el contexto interno para los componentes de estilo.
renderHtml : una función que el servidor del lado del servidor representa su plantilla y la devuelve como una cadena.

API de componentes

Todos los componentes generalmente tienen children , un className y un accesorio style y esto se aplicará al elemento que tiene el estilo para fácilmente anulaciones y personalización.

`Template`

Apuntalar	tipo	requerido	descripción
`lang`	cadena	Sí	Se agregará a la etiqueta `html`
`title`	cadena	Sí	El `title` del correo electrónico
`headAdditions`	matriz <{type, niños?, accesorios? }>	No	Debe ser una matriz, con un tipo (por ejemplo, `link` ), accesorios y tal vez niños, internamente `React.createElement`
`headStyles`	cadena	No	Los estilos en la etiqueta `head` , se envolverán automáticamente en `<styles type="text/css>`
`bodyStyle`	objeto	No	se agregará a los estilos de la etiqueta `body`

`Container`

Apuntalar	tipo	requerido	descripción
`alignment`	cadena	No	Pase `center` aquí para asegurarse de que el contenedor esté centrado y no alineado a la izquierda
`maxWidth`	Número \| cadena	No (predeterminado a 600)	Establecerá el ancho máximo de todo el contenedor

`Column`

Apuntalar	tipo	requerido	descripción
`small`	número	No (predeterminado a 12)	El recuento de columnas de 1 a 12 para pantallas de menos de 600px
`large`	número	No (predeterminado a `small)`	El recuento de columnas de 1 a 12 para pantallas superiores a 600px
`noPadding`	booleano	No	Eliminará el relleno de la columna

`Link`

Apuntalar	tipo	requerido	descripción
`href`	cadena	Sí	Objetivo del enlace
`type`	enumer	No (predeterminado es 'enlace')	Puede ser 'enlace', 'primario' o 'hueco'
`fullWidth`	booleano	No	Hace que el enlace se expanda al máximo

`Image`

Apuntalar	tipo	requerido	descripción
`src`	cadena	Sí	La fuente de la imagen
`height`	número	No	La altura de la imagen
`width`	número	No	El ancho de la imagen

`Header`

Apuntalar	tipo	requerido	descripción
`logo`	cadena	No	SRC de log, si se pasa, se convertirá en un logotipo centrado horizontalmente en la parte superior del correo electrónico
`title`	cadena	No	Si se pasa, hará el título, justo debajo del logotipo.
`children`	Nodo	No	Para el estilo personalizado puedes pasar lo que quieras

`renderHtml(Template, emailData, headStyles)`

Argumento	tipo	requerido	descripción
`Template`	Nodo	Sí	El componente de plantilla
`emailData`	objeto	No	EmailData se extenderá como accesorios para el componente superior en su árbol
`headStyles`	cadena	No	Para el estilo global puedes pasar estilos que entran en la cabeza aquí

Tema

Si no tiene fines de estilo especiales y personalizados, el tema predeterminado será más que suficiente. Pero si desea un poco más de control, este es el tema que se puede anular, al pasarlo como un accesorio theme para PostonentsProvider , ese debe ser el primer elemento:

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

Este es el tema actual, puede extenderse en el 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
  } ,
} ;