Skip to content

FormatJS

FormatJS supplies JavaScript formatting libraries. Its React Intl package shows translated messages, dates and numbers in a React app.

Visit FormatJS

How do React messages become a translation file?

Give each message a stable ID and default wording where it appears in the React app. The FormatJS extraction tool can collect those messages into a catalog, a file you hand to translators. Load the returned messages for the visitor’s locale.

Keep the same ID when translated text changes. Add context for short labels. For example, “Open” on a shop page might describe business hours, while “Open” on a button might mean show a document. Those meanings need separate IDs.

How does React Intl show counts, dates and missing messages?

Use one complete message for each meaning. A plural message can include different wording for one result and for other counts. React Intl also formats numbers and dates for the active locale.

Set the default locale to match the language of your default messages. If a translation is missing, React Intl can format the default message. If no usable text is available, the message ID may appear. Check that case before release.

How can you rehearse a missing message and a plural?

Sketch a fictional ticket list with English and German message catalogs. Use paper only and leave the app files untouched.

  1. Mark a whole count message
    Give the ticket count one ID. Write the expected wording for one ticket and for two tickets in each language. Keep the count available to the translator.
  2. Remove one entry on the sketch
    Cross out the German count entry. Mark the configured English default as the expected fallback. If the sketch would show an ID, mark that as a release issue.
  3. Hand over the complete set
    Keep the IDs, default wording and reviewed locale files together. Ask whoever builds the app to check that the returned message still uses the count.

What does FormatJS cost to use and what do you keep?

React Intl is open source under a BSD license. Formatting in the library has no per-character service bill. Translation work and app hosting are separate costs.

Keep the source messages and reviewed catalogs alongside the code and the settings that extract and build them. Check the JavaScript environment for the international formatting APIs you need. If you compile catalogs before shipping, verify that your build supports the compiler’s native dependencies.