Розробка та верстка шаблонів трансакційних email (React Email)
React Email — бібліотека від команди Resend, яка дозволяє створювати email-шаблони прямо в JSX з TypeScript, з повним контролем через компоненти. Ніяких HTML-таблиць вручну — компоненти <Section>, <Row>, <Column> генерують сумісний HTML за вас.
Встановлення та базова структура
npm install @react-email/components react react-dom
npm install -D @react-email/render
Шаблон — це звичайний React-компонент, який експортує JSX:
import {
Body, Button, Column, Container, Head, Heading,
Hr, Html, Img, Link, Preview, Row, Section, Text
} from '@react-email/components';
interface OrderConfirmationProps {
orderId: string;
customerName: string;
items: { name: string; qty: number; price: string }[];
total: string;
orderUrl: string;
}
export default function OrderConfirmation({
orderId,
customerName,
items,
total,
orderUrl,
}: OrderConfirmationProps) {
return (
<Html lang="uk">
<Head />
<Preview>Замовлення #{orderId} підтверджено — дякуємо за покупку</Preview>
<Body style={{ backgroundColor: '#f9fafb', fontFamily: 'Inter, Arial, sans-serif' }}>
<Container style={{ maxWidth: 600, margin: '0 auto', backgroundColor: '#fff', borderRadius: 12 }}>
{/* Шапка */}
<Section style={{ padding: '24px 32px 0' }}>
<Img src="https://example.com/logo.png" width={120} alt="Logo" />
</Section>
{/* Контент */}
<Section style={{ padding: '24px 32px' }}>
<Heading style={{ fontSize: 24, color: '#111827', marginTop: 0 }}>
Замовлення #{orderId} підтверджено ✓
</Heading>
<Text style={{ color: '#374151' }}>
Привіт, {customerName}! Ваше замовлення прийнято та передано в обробку.
</Text>
{/* Позиції замовлення */}
{items.map((item, i) => (
<Row key={i} style={{ borderBottom: '1px solid #e5e7eb', padding: '8px 0' }}>
<Column style={{ color: '#111827' }}>{item.name}</Column>
<Column style={{ textAlign: 'right', color: '#6b7280' }}>
{item.qty} × {item.price}
</Column>
</Row>
))}
<Row style={{ paddingTop: 12 }}>
<Column style={{ fontWeight: 700 }}>Разом</Column>
<Column style={{ textAlign: 'right', fontWeight: 700 }}>{total}</Column>
</Row>
</Section>
{/* CTA */}
<Section style={{ padding: '0 32px 32px', textAlign: 'center' }}>
<Button
href={orderUrl}
style={{
backgroundColor: '#3b82f6',
color: '#fff',
padding: '12px 24px',
borderRadius: 8,
fontWeight: 600,
fontSize: 16,
}}
>
Відстежувати замовлення
</Button>
</Section>
{/* Футер */}
<Section style={{ padding: '16px 32px', textAlign: 'center' }}>
<Text style={{ fontSize: 13, color: '#9ca3af' }}>
© 2026 Example Inc. ·{' '}
<Link href="{{unsubscribeUrl}}" style={{ color: '#9ca3af' }}>
Відписатися
</Link>
</Text>
</Section>
</Container>
</Body>
</Html>
);
}
Рендеринг у HTML для відправлення
import { render } from '@react-email/render';
import OrderConfirmation from './emails/OrderConfirmation';
const html = render(
<OrderConfirmation
orderId="12345"
customerName="Іван"
items={order.items}
total="5 430 ₴"
orderUrl="https://example.com/orders/12345"
/>
);
Переваги над MJML
- Повна підтримка TypeScript — type-safe props для шаблонів
- Повторне використання компонентів — побудуйте бібліотеку email-компонентів
- Легке тестування — Jest, Vitest можуть тестувати компоненти
- Немає кроку збирання — на відміну від MJML, React Email використовує стандартні інструменти
Строки реалізації
Створення набору трансакційних шаблонів з React Email — 4–6 днів.