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+ клієнтах.