React-Intl Simple JSON

Manage React Intl locale files in PhraseApp

File Extensions.json
API Extensionreact_simple_json
Format OptionsNo
ImportYes
ExportYes
Pluralization supported?Yes
Descriptions supported?No

Example

{
  "boolean_key": "--- true\n",
  "empty_string_translation": "",
  "key_with_description": "Check it out! This key has a description! (At least in some formats)",
  "key_with_line-break": "This translations contains\na line-break.",
  "nested.deeply.key": "Wow, this key is nested even deeper.",
  "nested.key": "This key is nested inside a namespace.",
  "null_translation": null,
  "pluralized_key.one": "Only one pluralization found.",
  "pluralized_key.other": "Wow, you have %s pluralizations!",
  "pluralized_key.zero": "You have no pluralization.",
  "sample_collection": [
    "first item",
    "second item",
    "third item"
  ],
  "simple_key": "Just a simple key with a simple message.",
  "unverified_key": "This translation is not yet verified and waits for it. (In some formats we also export this status)"
}

You can import and export locale files for React Intl projects by extracting your messages into separate JSON files which translate to the "React-Intl Simple JSON" format in PhraseApp.

How to use React Intl with PhraseApp

Typically your translations reside in a .js file like this:

module.exports = {
  "locales": ["en-US"],
  "messages": {
    "hello" : "World",
    other_hello : 'Other World',
    },
    "formats": {}
  };

Move your messages into a separate locale file, e.g. en-US.json:

{
  "hello" : "World",
  other_hello : 'Other World',
}

Make sure the messages are valid JSON syntax:

{
  "hello" : "World",
  "other_hello" : "Other World"
}

See the official JSON guidelines for more information how to convert your file to valid JSON. You can also use the JSON linter to check if your JSON files are valid.

Now, include the messages with a require statement:

module.exports = {
  "locales": ["en-US"],
  "messages": require('./en-US.json'),
  "formats": {}
};

You can now use the React-Intl Simple JSON format to upload/download your React Intl locale files

Nested Messages

If you’re using nested messages please use the React-Intl Nested JSON format instead. Note that this is deprecated in React Intl v2.


Further Reading