Common questions about React internationalization

Call `i18n.changeLanguage('de')` on the `i18n` object that `useTranslation` returns. It returns a promise and every component using the hook re-renders. Persist the choice with i18next-browser-languagedetector or your own storage.

Write the variable as `{{name}}` in the string and pass its value in the options object, `t('welcome', { name })`. In React set `interpolation.escapeValue` to `false`, use `count` for plurals, and `$t(key)` to nest another key.

Use the imperative API. `FormattedMessage` renders a React element, but `placeholder`, `title`, `alt` and `aria-label` need plain strings, so call `useIntl()` and pass `intl.formatMessage({ id, defaultMessage })` to the attribute.

Learn how to access the current locale in your React app using the useIntl hook from react-intl, and where the IntlProvider that supplies that locale is configured.

Learn how to add a language switcher to your React app using the react-intl library for easy localization. Enhance user experience and make your app more accessible to a wider audience by allowing users to select their preferred language.

Learn how to add newlines to localization messages in React with this easy guide.

Learn how to add HTML tags to your localization messages in React to create more dynamic and engaging user experiences.

Learn how to configure your React app architecture to support localization with our easy-to-follow guide. Organize translations by language, separate code from translations, and check documentation from localization libraries for best practices.

Learn how to implement lazy loading of translations in your React application to improve performance and reduce initial loading time.

Learn how to extract localization messages from your React app. Discover how popular libraries like react-intl and react-i18next can help streamline the process, and find out how to ensure your translatable messages are properly extracted for translation.

Learn how to fix missing message errors in your React application that uses react-intl for localization. Understand why these errors occur and how they can help you identify missing messages. Discover how to use the onError prop on the IntlProvider component to change the way missing messages are handled.

The warning means a component called `useTranslation` before `i18n.use(initReactI18next).init()` ran. Import your i18n setup module once at the app entry, before any component renders, or pass the instance with `I18nextProvider`.

Learn how to properly format dates in React with the built-in JavaScript Intl object or third-party libraries like react-intl. Avoid confusion and improve the user experience with consistent date formatting across different languages and locales.

Learn how to properly format numbers in your React application for different languages and locales using the built-in JavaScript Intl object. Ensure your app is user-friendly and accessible for all with accurate number formatting.

It all depends on what you need and which localization library you want to use. Currently, many libraries solve the localization problem in React very well. If you are not sure which one to choose, maybe npm trends, activities, and maintenance on GitHub repositories could be a good place to start.

Learn how to localize your React app that uses third-party UI libraries like MS Fluent UI and Material UI. Discover why localization should not be tightly coupled with UI component libraries and how to use a localization library to manage your content separately.

Learn how to programmatically set the language in your React app using a localization library. Improve your user experience by reflecting the user's preferred language in your app's language settings.

Learn how to set the proper text direction in your localized React app with our step-by-step guide. Ensure your app is accessible and usable for users who read right-to-left languages like Arabic and Hebrew.

Learn how to use dynamic strings and placeholders in localized messages in React.

Learn how to use localization messages in non-component code in React with popular libraries like react-intl.

Learn how to use React Context for internationalization (i18n) in your React applications! Say goodbye to props drilling and easily access localization messages throughout your component tree.

Looking to internationalize your React application but not sure whether to use React-intl or React-i18next? Check out our recommendations for checking trends on NPM and activity on Github to help you choose the right library for your needs.

Learn about the best practice for storing multi-language text in a React app. Keep localization messages independent of the code in separate files, such as en.json for English and de.json for German, to enable easy and efficient translation updates.

Learn how developers and translators can work together effectively to localize a React app. Find out about the workflow between the two teams, the importance of using a localization management tool, and how collaboration can ensure accurate and consistent translations.

Learn where to save the preferred language in your React app to avoid requiring users to set it each time they access the app. Discover how storing this information on the client or server side can impact accessibility across devices and browsers.