React Email एक टेम्पलेटिंग लाइब्रेरी है, भेजने का टूल नहीं। आप अपना ईमेल @react-email/components का उपयोग करके एक React कंपोनेंट के रूप में लिखते हैं, उसे HTML स्ट्रिंग में बदलने के लिए render() कॉल करते हैं, और फिर वह HTML डिलीवरी के लिए किसी भी ईमेल प्रोवाइडर को सौंपते हैं। यह विभाजन महत्वपूर्ण है: React Email मार्कअप सँभालता है (और क्रॉस-क्लाइंट विसंगतियाँ जो ईमेल HTML को कठिन बनाती हैं), जबकि एक अलग प्रोवाइडर भेजने का काम करता है। यह रहा पूरा प्रवाह।
ईमेल टेम्पलेट कैसे बनाएँ?
पैकेज इंस्टॉल करें:
npm install @react-email/components @react-email/renderये कंपोनेंट ईमेल-सेफ HTML में मैप होते हैं और इनलाइन स्टाइल तथा टेबल लेआउट आपके लिए सँभालते हैं। एक सरल रसीद टेम्पलेट, जो props स्वीकार करता है ताकि आप इसे दोबारा उपयोग कर सकें:
// emails/Receipt.tsx
import { Html, Head, Body, Container, Heading, Text } from "@react-email/components";
type ReceiptProps = {
name: string;
total: string;
};
export function Receipt({ name, total }: ReceiptProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "sans-serif" }}>
<Container>
<Heading>Thanks, {name}</Heading>
<Text>Your order total was {total}.</Text>
</Container>
</Body>
</Html>
);
}चूँकि यह सिर्फ React है, आप किसी भी कंपोनेंट की तरह compose, loop और props पास कर सकते हैं, और भेजने से पहले इसे लोकली प्रीव्यू कर सकते हैं।
कंपोनेंट को HTML में कैसे रेंडर करें?
render() एलिमेंट लेता है और एक HTML स्ट्रिंग लौटाता है। यह एक प्लेन-टेक्स्ट वर्शन भी बना सकता है, जिसे आपको टेक्स्ट विकल्प के रूप में शामिल करना चाहिए:
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const html = await render(<Receipt name="Alex" total="$42.00" />);
const text = await render(<Receipt name="Alex" total="$42.00" />, {
plainText: true,
});इस बिंदु पर आपके पास HTML की एक स्ट्रिंग है। React Email का काम पूरा हो गया। अभी तक कुछ भेजा नहीं गया है; इसके लिए आपको एक प्रोवाइडर चाहिए।
Bird से भेजें
रेंडर किए गए HTML को सीधे Bird email API में पास करें। कंपोनेंट का आउटपुट html फ़ील्ड बन जाता है:
import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });
const html = await render(<Receipt name="Alex" total="$42.00" />);
const { data, error } = await bird.email.send({
from: "you@yourdomain.com",
to: ["delivered@bird.dev"],
subject: "Your receipt",
html,
}).safe();delivered@bird.dev sandbox पता हमेशा मेल स्वीकार करता है, इसलिए आप एक ही रन में टेम्पलेट और भेजने दोनों की पुष्टि कर सकते हैं। यह पैटर्न सर्वरलेस फ़ंक्शन में आसानी से फिट होता है, जो Vercel पर ईमेल कैसे भेजें में कवर किया गया है। अगर आप SMTP से भेजना चाहें, तो वही html स्ट्रिंग Nodemailer के साथ काम करती है।
FAQ
क्या React Email ईमेल भेजता है?
नहीं। यह टेम्पलेट बनाता है और उसे HTML और प्लेन टेक्स्ट में रेंडर करता है। डिलीवरी एक अलग चरण है जिसे कोई प्रोवाइडर सँभालता है, जैसे SMTP सर्वर या email API।
HTML हाथ से लिखने की बजाय React Email क्यों उपयोग करें?
ईमेल HTML को ऐसे क्लाइंट्स में काम करना होता है जो CSS के बहुत अलग-अलग सबसेट सपोर्ट करते हैं, जिसका मतलब आम तौर पर नेस्टेड टेबल और इनलाइन स्टाइल होता है। React Email के कंपोनेंट वह मार्कअप आपके लिए बनाते हैं, तो आप कंपोनेंट लिखते हैं और ईमेल-सेफ आउटपुट पाते हैं।
क्या मैं एक टेम्पलेट को अलग-अलग डेटा के साथ दोबारा उपयोग कर सकता/सकती हूँ?
हाँ। टेम्पलेट React कंपोनेंट हैं, इसलिए वे props लेते हैं। हर प्राप्तकर्ता के लिए अलग-अलग वैल्यू के साथ उसी कंपोनेंट को रेंडर करें, फिर हर परिणाम भेजें।
React Email और एक भेजने वाला API काम को साफ़-साफ़ बाँटते हैं: एक संदेश को आकार देता है, दूसरा उसे डिलीवर करता है। भेजने की तरफ़ प्रबंधित टेम्पलेटिंग के लिए, देखें Bird email templates।