Skip to main content
React Email supports React Intl for internationalization. This guide shows how to convert an English React Email template to support multiple locales.

​
Prerequisites

To get the most out of this guide, you’ll need to: 
npm i -S react-intl
This guide will use the following email template as a base.
emails/welcome.jsx
export default function WelcomeEmail({ name }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to Acme</Preview>
      <Tailwind>
        <Body className="bg-gray-100 font-sans">
          <Container className="mx-auto py-10 px-5">
            <Section className="bg-white rounded-lg p-8">
              <Heading className="text-2xl font-bold text-gray-900 m-0 mb-6">
                Welcome to Acme
              </Heading>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Hi {name}
              </Text>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Thanks for signing up! We're excited to have you on board.
              </Text>
              <Button
                href="https://example.com/dashboard"
                className="bg-indigo-600 rounded-md text-white text-base font-semibold no-underline text-center block py-3 px-6 my-6"
              >
                Get Started
              </Button>
              <Hr className="border-gray-200 my-6" />
              <Text className="text-sm text-gray-400 m-0">
                If you have any questions, reply to this email. We're here to help!
              </Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

WelcomeEmail.PreviewProps = {
  name: 'John Lennon',
};

​
Internationalization with React Intl

React Intl is a library for internationalization and localization that provides a way to format messages in different languages.

​
1. Create messages for each locale

For each locale, create a new JSON file containing the content of the email in that locale. 
{
  "header": "Welcome to Acme",
  "hi": "Hi",
  "thanks": "Thanks for signing up! We're excited to have you on board.",
  "get-started": "Get Started",
  "questions": "If you have any questions, reply to this email. We're here to help!"
}
Alternatively, you can add locale-specific messages in the email file.
Example
const messages = {
  en: {
    header: 'Welcome to Acme',
    hi: 'Hi',
    thanks: 'Thanks for signing up! We\'re excited to have you on board.',
    'get-started': 'Get Started',
    questions: 'If you have any questions, reply to this email. We\'re here to help!',
  },
  es: {
    header: 'Bienvenido a Acme',
    hi: 'Hola',
    thanks: 'Gracias por registrarte! Estamos emocionados de tenerte en la plataforma.',
    'get-started': 'Comenzar',
    questions: 'Si tienes alguna pregunta, responde a este correo electrónico. Estamos aquí para ayudarte!',
  },
  pt: {
    header: 'Bem-vindo ao Acme',
    hi: 'Olá',
    thanks: 'Obrigado por se inscrever! Estamos ansiosos para te receber na plataforma.',
    'get-started': 'Começar',
    questions: 'Se você tiver alguma dúvida, responda a este e-mail. Estamos aqui para ajudar!',
  },
};

​
2. Update the email props

Add the locale prop to the email template, interface, and test data.
emails/welcome.jsx
export default function WelcomeEmail({ name }) {
export default function WelcomeEmail({ name, locale }) {
  return (
   ...
  );
}

WelcomeEmail.PreviewProps = {
  name: 'John Lennon',
  locale: 'en',
};

​
3. Update the email template

In the email template, remove the hardcoded content and use createIntl to format the email message strings.
emails/welcome.jsx
import { createIntl } from 'react-intl';

export default async function WelcomeEmail({ name, locale }) {
  const { formatMessage } = createIntl({
    locale,
    messages: await import(`../messages/${locale}/welcome-email.json`), // if using locale-specific files
  });

  return (
    <Html>
      <Head />
      <Preview>Welcome to Acme</Preview>
      <Preview>{formatMessage({ id: 'header' })}</Preview>
      <Tailwind>
        <Body className="bg-gray-100 font-sans">
          <Container className="mx-auto py-10 px-5">
            <Section className="bg-white rounded-lg p-8">
              <Heading className="text-2xl font-bold text-gray-900 m-0 mb-6">
                Welcome to Acme
                {formatMessage({ id: 'header' })}
              </Heading>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Hi {name}
                {formatMessage({ id: 'hi' })} {name}
              </Text>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Thanks for signing up! We're excited to have you on board.
                {formatMessage({ id: 'thanks' })}
              </Text>
              <Button
                href="https://example.com/dashboard"
                className="bg-indigo-600 rounded-md text-white text-base font-semibold no-underline text-center block py-3 px-6 my-6"
              >
                Get Started
                {formatMessage({ id: 'get-started' })}
              </Button>
              <Hr className="border-gray-200 my-6" />
              <Text className="text-sm text-gray-400 m-0">
                If you have any questions, reply to this email. We're here to help!
                {formatMessage({ id: 'questions' })}
              </Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

WelcomeEmail.PreviewProps = {
  name: 'John Lennon',
  locale: 'en',
};

​
4. Update any email calls

When calling the email template, pass the locale prop to the email component.

​
Try it yourself

React Email with React Intl example

See the full source code.

Resend with React Intl example

See the full source code.