Question 1

How to set up FormatJS in a React app?

Accepted Answer

Install react-intl, wrap your app with IntlProvider, and define messages using hooks like useIntl. The README lists react-intl as a key package, and build tools like the Babel plugin help extract messages for translation workflows.

Question 2

FormatJS vs i18next: which is better for React?

Accepted Answer

FormatJS excels with ICU message format and standards compliance, ideal for complex i18n in React. i18next has a broader plugin ecosystem and simpler setup. Choose FormatJS for rigorous i18n needs; i18next for flexibility across frameworks.

Question 3

How to extract translation messages with TypeScript?

Accepted Answer

Use the @formatjs/ts-transformer package to compile messages at build time. Configure it in your tsconfig to automatically extract strings, as shown in the published packages list for TypeScript integration.

Question 4

Does FormatJS support server-side rendering?

Accepted Answer

Yes, react-intl supports SSR by serializing the intl context. Pass locale and messages from server to client, useful in frameworks like Next.js, though setup requires additional configuration for hydration.

Question 5

What's the bundle size impact of using FormatJS?

Accepted Answer

Bundle size increases with locale data and polyfills—often adding tens of KBs. Use selective imports and tree-shaking, but full i18n support can be heavy, especially for older browsers requiring polyfills.

Question 6

How to switch languages dynamically in a FormatJS app?

Accepted Answer

Update the locale prop in IntlProvider and reload message files, possibly with code splitting. The intl API handles formatting updates, but message management must be handled manually or via build tools.

formatjs

What is formatjs?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions