postonents
Set the importHelpers key to false
Eine einfache UI-Bibliothek für leichte, hochpassbare E-Mail-Komponenten. Entfernen Sie die Schmerzen beim Schreiben von E -Mails, indem Sie die Vorlagen in React schreiben, dann SSR und die generierte HTML an das Backend weitergeben, um sie auszusenden.
Beginnen Sie mit der Installation postonents :
yarn add postonents
// or
npm install --save postonents
So fügen Sie Postonenten zu einer NodeJS-Anwendung hinzu, fügen Sie auch Installation react und react-dom hinzu.
yarn add react react-dom
// or
npm install --save react react-dom
Auf diese Weise können Sie so etwas schreiben, um eine HTML -Zeichenfolge zu generieren, die Diensten wie SendInblue oder Mandrill zur Verfügung gestellt werden kann.
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 In diesem Paket sind die folgenden Komponenten enthalten:
Template : Die Wrapper -Komponente, die die Tags <html> , <head> und <body> mit vielen Anpassungsmöglichkeiten wie dem Hinzufügen von Skripten und globalen Stilen erzeugt.Container : Komponente zur allgemein Row s. Standardmäßig ein maximales 600px breit. (Aus dem Grund, warum hier sehen)Row : Jede Zeile hat 12 mögliche Column s, diesen Wrap, wenn sie zu groß sind.Column : Eine Spalte für die Inhalttrennung kann für small (<600px) und large (> = 600px) angepasst werden.Text : Komponente zum Anzeigen und Stil von Textinhalten.Link : Komponente zum Anzeigen und Stil von Links ( a Tag). Kann das Aussehen eines Links, einen Primärknopf und einen hohlen Knopf haben.Image : Komponente für Bilder. Benötigt eine SRC und entweder Höhen- oder Breitendefinition.Header , Footer : Zwei Layoutkomponenten zum LayoutingFullWidth : Grundsätzlich ein Container und eine Row . Zum Layouting auf der oberen Ebene, wenn verschiedene Hintergrundkolors gesucht werden.PostonentsProvider , PostonentsConsumer und PostonentContext : Mehrere mögliche Möglichkeiten, auf den internen Kontext für Styling -Komponenten zuzugreifen oder zu ändern.renderHtml : Eine Funktion, die serverseitig Ihre Vorlage macht und sie als Zeichenfolge zurückgibt. Alle Komponenten haben im Allgemeinen ein children , einen className und eine style -Requisite.
Template| Stütze | Typ | erforderlich | Beschreibung |
|---|---|---|---|
lang | Saite | Ja | Wird dem html -Tag hinzugefügt |
title | Saite | Ja | Der title der E -Mail |
headAdditions | Array <{Typ, Kinder?, Requisiten? }> | NEIN | Muss ein Array sein, mit einem Typ (z. B. link ), Requisiten und vielleicht Kindern, die wir intern React.createElement |
headStyles | Saite | NEIN | Stile im head -Tag werden automatisch in <styles type="text/css> verpackt |
bodyStyle | Objekt | NEIN | wird zu den Stilen des body -Tags hinzugefügt |
Container| Stütze | Typ | erforderlich | Beschreibung |
|---|---|---|---|
alignment | Saite | NEIN | Pass center hier, um sicherzustellen, dass der Behälter zentriert und nicht links ausgerichtet ist |
maxWidth | Nummer | Saite | Nein (Standardeinstellungen bis 600) | Set die maximale Breite des gesamten Behälters |
Column| Stütze | Typ | erforderlich | Beschreibung |
|---|---|---|---|
small | Nummer | Nein (Standardeinstellungen bis 12) | Die Spalte zählt von 1 bis 12 für Bildschirme unter 600px |
large | Nummer | Nein (Standardeinstellungen zu small) | Die Spaltenzahl von 1 bis 12 für Bildschirme über 600px |
noPadding | boolean | NEIN | Entfernen Sie die Polsterung der Säule |
Link| Stütze | Typ | erforderlich | Beschreibung |
|---|---|---|---|
href | Saite | Ja | Ziel des Links |
type | Aufreum | Nein (Standardeinstellungen zu 'Link') | Kann "link", "primär" oder "hohl" sein |
fullWidth | boolean | NEIN | Den Link erweitert sich in vollen Zügen |
Image| Stütze | Typ | erforderlich | Beschreibung |
|---|---|---|---|
src | Saite | Ja | Die Quelle des Bildes |
height | Nummer | NEIN | Die Höhe des Bildes |
width | Nummer | NEIN | Die Breite des Bildes |
Header| Stütze | Typ | erforderlich | Beschreibung |
|---|---|---|---|
logo | Saite | NEIN | SRC of Log, falls übergeben wird ein Logo horizontal oben in der E -Mail zentriert |
title | Saite | NEIN | Wenn er verabschiedet wird, wird der Titel direkt unter dem Logo rendern. |
children | Knoten | NEIN | Für ein benutzerdefiniertes Styling können Sie passieren, was Sie wollen |
renderHtml(Template, emailData, headStyles)| Argument | Typ | erforderlich | Beschreibung |
|---|---|---|---|
Template | Knoten | Ja | Die Vorlagenkomponente |
emailData | Objekt | NEIN | EmailData wird als Requisiten an die oberste Komponente in Ihrem Baum verteilt |
headStyles | Saite | NEIN | Für das globale Styling können Sie Styles übergeben, die hier in den Kopf gehen |
Wenn Sie keine speziellen und benutzerdefinierten Stylingzwecke haben, ist das Standardthema mehr als genug. Wenn Sie jedoch mehr Kontrolle wünschen, ist dies das Thema, das überschrieben werden kann, indem Sie es als theme -Requisite an PostonentsProvider übergeben, das das erste Element sein muss:
< PostonentsProvider theme = { { ... } } >
< Template >
...
</ Template >
</ PostonentsProvider >Dies ist das aktuelle Thema, es kann in Zukunft erweitert werden.
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
} ,
} ; Beispiele werden regelmäßig hinzugefügt und auf Github -Seiten sichtbar sein
Meine Spalten werden nicht angezeigt, nachdem sie sie ausgeschickt haben
Dies geschieht viel mit Mandrill -Nutzern. In diesem Artikel finden Sie im HelpCenter und stellen Sie sicher, dass die automatische CSS -Inlining deaktiviert ist.
