Third-Party Integrations
Relevant source files
The following files were used as context for generating this wiki page:
React Email provides a flexible framework that integrates with various email service providers, internationalization libraries, and editor engines. The system converts React-based templates into standard HTML and plain text, ensuring compatibility with virtually any third-party platform that accepts email markup.
Users can leverage these integrations to send transactional emails, manage multi-language support, or embed visual editing capabilities directly into their applications.
Sources: README.md:94-96, SKILL.md:255-272
Rendering and Delivery Pipeline
The core integration mechanism relies on the render function from the react-email package. This utility transforms React components into the specific formats required by third-party delivery services.
Transformation Flow
- React Template: Developers define templates using React components.
- HTML Rendering: The
renderfunction generates optimized, table-based HTML compatible with email clients. - Plain Text Generation: Passing the
plainText: trueoption produces a text-only version for accessibility and fallback. - Provider Hand-off: The resulting strings are passed to the third-party SDK or API.
The diagram shows the data flow from a React component to a third-party provider via the rendering utility.
Sources: SKILL.md:237-251, README.md:94-96
Email Service Providers (ESPs)
React Email supports numerous major email service providers. While the Resend SDK provides a first-class experience by automatically handling React components, other providers require the template to be rendered to a string before transmission.
Supported Providers
| Provider | Integration Type | SDK Requirement |
|---|---|---|
| Resend | Native | resend package |
| Nodemailer | SMTP/Transport | nodemailer package |
| SendGrid | API/SMTP | @sendgrid/mail |
| AWS SES | API/SMTP | @aws-sdk/client-ses |
| Mailgun | API | mailgun.js |
| Postmark | API | postmark |
| Azure Communication | API | @azure/communication-email |
Sources: README.md:98-108, SKILL.md:255-272
Resend Integration Example
The Resend SDK accepts React components directly, eliminating the manual rendering step for the developer.
import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
from: 'onboarding@resend.dev',
to: 'user@example.com',
subject: 'Welcome',
react: <WelcomeEmail name="John" />
});
Sources: SKILL.md:259-270
Internationalization (i18n)
React Email integrates with specialized i18n libraries to support multi-language templates. These integrations allow developers to manage message files and locales outside of the JSX structure.
Supported Libraries
- next-intl: Recommended for Next.js applications; uses
createTranslator. - react-intl (FormatJS): Supports complex pluralization and date formatting; uses
createIntl. - react-i18next: Offers extensive control via the
i18nextinstance.
Localization Workflow
The sequence diagram illustrates how an application coordinates with an i18n library to provide localized content to a React Email template.
Sources: I18N.md:10-25, I18N.md:143-155
Editor and UI Extensions
React Email integrates several third-party libraries to power its visual editor and specialized components.
Core Editor Dependencies
The @react-email/editor package is built upon several foundational open-source projects to provide rich text and visual editing capabilities.
- TipTap: Acts as the primary editor framework.
- ProseMirror: Provides the underlying document model and state management.
- Prism.js: Powers syntax highlighting for the
CodeBlockcomponent. - Radix UI: Provides accessible UI primitives for components like Popovers and Slots.
Sources: README.md:90-92, packages/editor/package.json:115-135, COMPONENTS.md:204-210
Syntax Highlighting Integration
The CodeBlock component integrates with prismjs to render highlighted code snippets within emails using specific themes like Dracula or Nord.
Sources: COMPONENTS.md:231-240
Summary
Third-party integrations in React Email allow for a modular architecture where templates are decoupled from delivery and localization logic. By utilizing the render utility, developers can pipe React-generated content into any modern email service provider while leveraging industry-standard libraries for internationalization and editing.
Sources: README.md:94-96, SKILL.md:237-251