Unduh postonents - Unduh Kode Sumber postonents

postonents

Komponen pihak ketiga

Set the importHelpers key to false

Unduh

Postonen

Perpustakaan UI sederhana untuk komponen email ringan dan sangat dapat disesuaikan. Hapus rasa sakit menulis email, dengan menulis templat di React, lalu SSR mereka dan lewati HTML yang dihasilkan ke backend untuk mengirimkannya.

Instalasi

Untuk memulai dengan postonents instal:

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

Pengaturan NodeJs Sederhana

Untuk menambahkan posonen ke aplikasi NodeJS juga menambahkan Instal react dan react-dom .

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

Ini akan memungkinkan Anda untuk menulis sesuatu seperti ini untuk menghasilkan string HTML yang dapat disediakan untuk layanan seperti SendinBlue atau 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

Termasuk komponen

Termasuk dalam paket ini adalah komponen berikut:

Template : Komponen pembungkus, yang menghasilkan tag <html> , <head> dan <body> dengan banyak kemungkinan kustomisasi seperti menambahkan skrip dan gaya global.
Container : Komponen untuk umumnya membungkus Row . Secara default maks 600px lebar. (untuk alasan mengapa melihat di sini)
Row : Setiap baris memiliki 12 kemungkinan Column S, bungkus itu, jika terlalu besar.
Column : Kolom untuk pemisahan konten, dapat disesuaikan untuk small (<600px) dan large (> = 600px).
Text : Komponen untuk menampilkan dan menata konten teks.
Link : Komponen untuk menampilkan dan gaya tautan ( a ). Dapat memiliki tampilan tautan, tombol utama dan tombol berongga.
Image : Komponen untuk gambar. Membutuhkan SRC dan definisi tinggi atau lebar.
Header , Footer : dua komponen tata letak untuk tata letak
FullWidth : Pada dasarnya sebuah Container dan Row . Untuk tata letak di level atas, jika latar belakang yang berbeda diinginkan.
PostonentsProvider , PostonentsConsumer dan PostonentContext : Beberapa cara yang memungkinkan untuk mengakses atau mengubah konteks internal untuk komponen gaya.
renderHtml : Fungsi yang sisi server membuat template Anda dan mengembalikannya sebagai string.

API Komponen

Semua komponen umumnya memiliki children , className dan prop style dan ini akan diterapkan pada elemen yang memiliki gaya untuk overrides dan kustomisasi yang mudah

`Template`

Menopang	jenis	diperlukan	keterangan
`lang`	rangkaian	Ya	Akan ditambahkan ke tag `html`
`title`	rangkaian	Ya	`title` email
`headAdditions`	array <{type, anak -anak?, alat peraga? }>	TIDAK	Perlu menjadi array, dengan jenis (mis. `link` ), alat peraga dan mungkin anak -anak, secara internal kami `React.createElement`
`headStyles`	rangkaian	TIDAK	Gaya di tag `head` , secara otomatis akan dibungkus dengan `<styles type="text/css>`
`bodyStyle`	obyek	TIDAK	akan ditambahkan ke gaya tag `body`

`Container`

Menopang	jenis	diperlukan	keterangan
`alignment`	rangkaian	TIDAK	Lulus `center` di sini untuk memastikan wadah dipusatkan dan tidak selaras kiri
`maxWidth`	Nomor \| rangkaian	Tidak (default ke 600)	Akan mengatur lebar maksimum dari seluruh wadah

`Column`

Menopang	jenis	diperlukan	keterangan
`small`	nomor	Tidak (default ke 12)	Jumlah kolom dari 1 hingga 12 untuk layar di bawah 600px
`large`	nomor	tidak (default ke `small)`	Jumlah kolom dari 1 hingga 12 untuk layar di atas 600px
`noPadding`	Boolean	TIDAK	Akan menghapus bantalan kolom

`Link`

Menopang	jenis	diperlukan	keterangan
`href`	rangkaian	Ya	Target tautan
`type`	enum	Tidak (default ke 'tautan')	Bisa menjadi 'tautan', 'primer' atau 'hollow'
`fullWidth`	Boolean	TIDAK	Membuat tautan meluas sepenuhnya

`Image`

Menopang	jenis	diperlukan	keterangan
`src`	rangkaian	Ya	Sumber gambar
`height`	nomor	TIDAK	Ketinggian gambar
`width`	nomor	TIDAK	Lebar gambar

`Header`

Menopang	jenis	diperlukan	keterangan
`logo`	rangkaian	TIDAK	SRC log, jika lulus akan membuat logo secara horizontal berpusat di bagian atas email
`title`	rangkaian	TIDAK	Jika lulus, akan membuat judul, tepat di bawah logo.
`children`	Node	TIDAK	Untuk gaya kustom Anda dapat melewati apapun yang Anda inginkan

`renderHtml(Template, emailData, headStyles)`

Argumen	jenis	diperlukan	keterangan
`Template`	Node	Ya	Komponen template
`emailData`	obyek	TIDAK	EmailData akan disebarkan sebagai alat peraga ke komponen paling atas di pohon Anda
`headStyles`	rangkaian	TIDAK	Untuk gaya global Anda dapat melewati gaya yang masuk ke kepala di sini

Tema

Jika Anda tidak memiliki tujuan gaya khusus dan khusus, tema default akan lebih dari cukup. Tetapi jika Anda ingin lebih banyak kontrol, ini adalah tema yang dapat ditimpa, dengan meneruskannya sebagai penyangga theme untuk PostonentsProvider , yang harus menjadi elemen pertama:

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

Ini adalah tema saat ini, mungkin diperpanjang di masa depan.

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