React Intl - React Email

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

bun add react-intl

yarn add react-intl

pnpm add 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!"
}

{
  "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!"
}

{
  "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!"
}

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.

​Prerequisites

​Internationalization with React Intl

​1. Create messages for each locale

​2. Update the email props

​3. Update the email template

​4. Update any email calls

​Try it yourself

React Email with React Intl example

Resend with React Intl example

Prerequisites

Internationalization with React Intl

1. Create messages for each locale

2. Update the email props

3. Update the email template

4. Update any email calls

Try it yourself