postonents Download - تنزيل رمز المصدر postonents

postonents

مكونات الطرف الثالث

Set the importHelpers key to false

تنزيل

بعد الولادة

مكتبة واجهة المستخدم البسيطة لمكونات البريد الإلكتروني الخفيفة الوزن والقابلة للتخصيص للغاية. قم بإزالة ألم كتابة رسائل البريد الإلكتروني ، من خلال كتابة القوالب في React ، ثم SSR وتمرير HTML الذي تم إنشاؤه إلى الواجهة الخلفية لإرساله.

تثبيت

للبدء بتثبيت postonents :

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

إعداد Nodejs البسيط

لإضافة PostOnents إلى تطبيق 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 . بشكل افتراضي أقصى 600 بكسل. (لسبب رؤية هنا)
Row : يحتوي كل صف على 12 Column ممكنًا ، هذا التفاف ، إذا كان كبيرًا جدًا.
Column : عمود لفصل المحتوى ، يمكن تخصيصه small (<600 بكسل) large (> = 600 بكسل).
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 للشاشات فوق 600 بكسل
`noPadding`	منطقية	لا	سوف يزيل حشوة العمود

`Link`

دعم	يكتب	مطلوب	وصف
`href`	خيط	نعم	هدف الرابط
`type`	التعداد	لا (الإعدادات الافتراضية إلى "الرابط")	يمكن أن يكون "رابط" أو "أساسي" أو "جوفاء"
`fullWidth`	منطقية	لا	يجعل الرابط يتوسع إلى أقصى حد

`Image`

دعم	يكتب	مطلوب	وصف
`src`	خيط	نعم	مصدر الصورة
`height`	رقم	لا	ارتفاع الصورة
`width`	رقم	لا	عرض الصورة

`Header`

دعم	يكتب	مطلوب	وصف
`logo`	خيط	لا	SRC من السجل ، إذا تم تمريره سيعرض شعارًا يركز أفقياً في الجزء العلوي من البريد الإلكتروني
`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
  } ,
} ;