> ## Documentation Index > Fetch the complete documentation index at: https://react.email/docs/llms.txt > Use this file to discover all available pages before exploring further. # React Intl > Integrating React Email with React Intl React Email supports [React Intl](https://formatjs.github.io/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: * [Set up React Email](/getting-started/automatic-setup) * [Install React Intl](https://formatjs.github.io/docs/getting-started/installation) ```bash npm theme={"theme":{"light":"github-light","dark":"vesper"}} npm i -S react-intl ``` ```bash bun theme={"theme":{"light":"github-light","dark":"vesper"}} bun add react-intl ``` ```bash yarn theme={"theme":{"light":"github-light","dark":"vesper"}} yarn add react-intl ``` ```bash pnpm theme={"theme":{"light":"github-light","dark":"vesper"}} pnpm add react-intl ``` This guide will use the following email template as a base. ```jsx emails/welcome.jsx theme={"theme":{"light":"github-light","dark":"vesper"}} export default function WelcomeEmail({ name }) { return ( Welcome to Acme
Welcome to Acme Hi {name} Thanks for signing up! We're excited to have you on board.
If you have any questions, reply to this email. We're here to help!
); } 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. ```json messages/en/welcome-email.json theme={"theme":{"light":"github-light","dark":"vesper"}} { "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!" } ``` ```json messages/es/welcome-email.json theme={"theme":{"light":"github-light","dark":"vesper"}} { "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!" } ``` ```json messages/pt/welcome-email.json theme={"theme":{"light":"github-light","dark":"vesper"}} { "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. ```jsx Example expandable theme={"theme":{"light":"github-light","dark":"vesper"}} 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. ```jsx emails/welcome.jsx theme={"theme":{"light":"github-light","dark":"vesper"}} // [!code --] export default function WelcomeEmail({ name }) { // [!code ++] export default function WelcomeEmail({ name, locale }) { return ( ... ); } WelcomeEmail.PreviewProps = { name: 'John Lennon', // [!code ++] locale: 'en', }; ``` ### 3. Update the email template In the email template, remove the hardcoded content and use `createIntl` to format the email message strings. ```jsx emails/welcome.jsx theme={"theme":{"light":"github-light","dark":"vesper"}} // [!code ++] import { createIntl } from 'react-intl'; export default async function WelcomeEmail({ name, locale }) { // [!code ++:4] const { formatMessage } = createIntl({ locale, messages: await import(`../messages/${locale}/welcome-email.json`), // if using locale-specific files }); return ( // [!code --] Welcome to Acme // [!code ++] {formatMessage({ id: 'header' })}
// [!code --] Welcome to Acme // [!code ++] {formatMessage({ id: 'header' })} // [!code --] Hi {name} // [!code ++] {formatMessage({ id: 'hi' })} {name} // [!code --] Thanks for signing up! We're excited to have you on board. // [!code ++] {formatMessage({ id: 'thanks' })}
// [!code --] If you have any questions, reply to this email. We're here to help! // [!code ++] {formatMessage({ id: 'questions' })}
); } 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 See the full source code. See the full source code.