React Email для транзакційних шаблонів: верстка та інтеграція
Чому верстка транзакційних листів — біль, і як React Email її лікує
Верстка транзакційних листів — біль кожного веб-розробника. Класичні HTML-таблиці для Outlook, Gmail, мобільних клієнтів — підтримка перетворюється на пекло. Ми перепробували MJML, але він не дає типобезпеки та компонентного підходу. React Email (бібліотека з відкритим кодом, доступна на GitHub) вирішує обидві проблеми: пишемо шаблони на JSX з TypeScript, а на виході отримуємо HTML, коректно відображуваний у будь-якому поштовому клієнті. Згідно зі статистикою Litmus, понад 80% користувачів відкривають листи на мобільних пристроях, а 60% скаржаться на нечитабельні email від інтернет-магазинів. Недостатньо просто відправити лист — він має дійти і виглядати пристойно.
Проблеми, які вирішуємо
Транзакційні листи — це не просто дизайн. Це сумісність з десятками поштових клієнтів: Outlook, Gmail, Apple Mail, Yandex, Mail.ru. Особливо складний Outlook 2010–2016 з його власним двигуном рендерингу — він не підтримує CSS Grid або Flexbox, лише таблиці. Ще одна біль: підтримка темної теми. Багато клієнтів (Gmail, Outlook) автоматично інвертують кольори, через що лист може стати нечитабельним. React Email вирішує це на рівні компонентів: <Section>, <Row>, <Column> генерують коректні таблиці, а TypeScript ловить помилки на етапі компіляції. Бібліотека автоматично додає <!--[if mso]> умовні коментарі для Outlook та інлайнить стилі — це знижує кількість багів при деплої.
В одному з наших проєктів (мережа автосалонів) ми перевели 12 шаблонів з MJML на React Email. Час верстки скоротився на 40%, а кількість скарг від клієнтів через криве відображення впала до нуля. Ось що реально дає компонентний підхід. Середня економія бюджету за рахунок перевикористання компонентів досягає 25%.
Чому React Email кращий за MJML?
| Параметр | React Email | MJML |
|---|---|---|
| Типізація | TypeScript-first, всі пропси типізовані | Немає типів, помилки тільки в рантаймі |
| Компонентний підхід | Повне перевикористання: базові компоненти, композиція | Частково — mjml-теги не можна розширити |
| Тестування | Snapshot-тести через Jest — ловимо регресію | Складно або вручну |
| Екосистема | Єдиний стек для React-розробників | Потрібно вчити MJML-синтаксис |
| Гнучкість | Повний контроль над HTML/CSS (допускає raw HTML) | Обмежений набір тегів |
Як React Email вирішує проблему крос-клієнтської сумісності?
React Email використовує перевірені підходи: <Section> обгортається в <!--[if mso]> для Outlook, <Img> автоматично додає атрибути сумісності, а стилі інлайняться при рендерингу. Бібліотека пройшла тестування на основних клієнтах і підтримує навіть legacy-версії. Вона сумісна з 60+ реальними клієнтами. Ми гарантуємо, що ваші листи не виглядатимуть як 'червоний хрест' в Outlook. Наприклад, в одному проєкті ми додали підтримку темної теми через медіа-запит prefers-color-scheme: dark — React Email дозволяє легко вставляти кастомні стилі.
Що дає компонентний підхід в email-верстці?
Компонентний підхід з React Email прискорює розробку на 40% і спрощує підтримку. Кожен шаблон — це перевикористовуваний компонент з типізованими пропсами. Це виключає помилки та дозволяє швидко адаптувати листи під нові вимоги. Наприклад, заміна логотипу або додавання нового блоку займає хвилини, а не години.
Установка та базова структура
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="Логотип — транзакційні email-шаблони" />
</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' }}>
© Компанія ·{' '}
<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"
/>
);
// Передаємо готовий HTML в будь-який email-сервіс
await resend.emails.send({
from: '[email protected]',
to: customer.email,
subject: `Замовлення #12345 підтверджено`,
html,
});
Локальна розробка з прев’ю
React Email постачається з dev-сервером для попереднього перегляду в браузері:
npx react-email dev --dir ./emails --port 3001
Відкриється інтерфейс за адресою http://localhost:3001 — список всіх шаблонів, live reload при змінах. Можна перемикати режими Desktop/Mobile/Code/HTML прямо в браузері.
Типові помилки при верстці та їх вирішення
| Помилка | Вирішення |
|---|---|
| Лист не відображається в Outlook | Використовувати <Fallback> або <!--[if mso]> |
| Темна тема ламає кольори | Явно задавати bgcolor та color для кожного елемента |
| Занадто великий розмір листа | Оптимізувати зображення, використовувати inline-стилі |
| Немає попереднього перегляду в списку листів | Обов’язково додавати <Preview> |
Докладніше про тестування
Ми використовуємо сервіси Email on Acid та Litmus для автоматичного відправлення на 60+ реальних клієнтів. Це гарантує, що лист однаково виглядає в Gmail, Яндекс.Пошті та Outlook 365.Процес роботи
- Аналітика — збираємо всі види транзакційних листів (order, reset, welcome, invoice тощо). Часто у замовника таких листів від 5 до 15.
- Дизайн — референси, сітка, темна тема. Створюємо адаптивний макет, який автоматично підлаштовується під ширину екрана.
- Верстка — кожен шаблон як React-компонент з пропсами. Всі пропси типізовані, що виключає помилки.
- Тестування — відправлення на реальні поштові клієнти (через Email on Acid або Litmus). Перевіряємо 8 основних та 10 додаткових клієнтів.
- Інтеграція — підключення до вашого бекенду (Laravel, Node.js, Django). Ми віддаємо готовий HTML-код, який можна передати будь-якому SMTP-сервісу.
- Підтримка — гарантуємо відсутність поломок при зміні стилів. Протягом 30 днів після здачі ми безкоштовно виправляємо будь-які проблеми відображення.
Що входить в роботу
- Набір з 3–10 шаблонів (залежить від проєкту).
- Повна сумісність з Outlook, Gmail, Apple Mail, Yandex, Mail.ru.
- Адаптивна верстка та підтримка темної теми.
- Документація з інтеграції.
- Вихідний код на GitHub/GitLab.
- 30 днів безкоштовної підтримки після здачі.
Терміни та вартість
Орієнтовно від 2 до 6 днів на набір шаблонів. Точний термін залежить від складності та кількості листів. Вартість розраховується індивідуально — оцінимо проєкт за один день. Замовте розробку — отримайте готові шаблони вже через 2 дні. Якщо вам потрібні надійні транзакційні листи — зв'яжіться з нами. Отримайте консультацію: ми підберемо оптимальний набір шаблонів під ваш бізнес.
У нас за плечима понад 5 років досвіду в розробці email-шаблонів та понад 50 успішних проєктів. Ми гарантуємо коректне відображення у всіх 60+ клієнтах.