​
Usage

The <TranslationProvider /> is required to use Lexicon’s translation features. You must include it at the top of your component tree as a wrapper - as mentioned in our quick start guide.

You should only import this one time at the top of your application to enable translations.

import React from "react"
import App from "./component/App"

export const TranslatedApp = () => {
  return (
    <TranslationProvider 
      defaultLanguage="en-US" 
      token={PUBLISHABLE_KEY}
    >
      <App />
    </TranslationProvider>
  )
}

Make sure to replace the PUBLISHABLE_KEY with the key you found in your dashboard.

Note: You can further improve performance and reduce costs by generating a translation file.

​
Properties

This component accepts various properties.

token
string
required

The token should be the publishable key within your Lexicon dashboard and is required to use Lexicon.

defaultLanguage
string
default: "en-US"

The language that you wrote your app in and are translating it from.

Example: en-US

translations
object

This allows you to pre-populate your app with a translation file that is generated by Lexicon. It helps to greatly reduce your use of translation credits and avoid backend requests altogether (although we will still generate a translation on the fly if we can’t find it in your translations).

You would simply import your translation file into your component and feed the JSON into this prop.

Please see how to generate translations for details on generating this file.

targetLanguage
string

In most scenarios, you should not provide this field because Lexicon will automatically translate the app into whatever locale we detect on the user’s device.

However, if you are testing (highly recommended) or want to manually force the app into a given language, you can provide the language here to force all text into the target language.

Example: es-ES

translationGuidance
string

Any additional guidance you’d like to provide to help our system generate your translations.

Most of the time you do not need to provide this, but if you are not happy with the translations and want to provide some guidance, this is where you would do it.

Example: Use formal language

cacheTranslationsOnDevice
boolean
default: "true"

Whether we should store the generated translations in a cache on the device. This makes future translations of the same text instantaneous and is a recommended performance improvement.

It is enabled by default, but if you have a scenario where you need to turn this off, please reach out and tell us your use case!

ignoreDefaultLanguageCountry
boolean
default: "true"

This setting is enabled by default and basically says: if the app was written in “en-US” [English United States], don’t translate it to “en-GB” [English Great Britain]. So basically, we just look at the “en” portion of your defaultLanguage field and determine whether something needs to be translated.

We do this so that you don’t waste translation credits translating “English” into another dialect of “English”.

If you set this to false, we will translate even when the language is the same if the country/dialect is different. This could be useful in some languages if there are major differences in dialects.

fallbackToBaseLanguage
boolean
default: "true"

When we are checking our pre-loaded translationFile for a translation that matches the targetLanguage we’re translating to, this determines whether or not we should attempt to fallback to a matching entry with the same base language when we can’t find an entry for the entire locale (including country code).

We usually recommend leaving this as true to save on translation credits and reduce queries unless you expect some nuances in the dialects between your users’ countries and want to be as accurate as possible.

For example, if this is left as true and we are trying to translate to “es-ES” [Spanish Spain], but we only have a translation file that contains the correct translations for “es” [Spanish], then we will simply use the “es” translations for this user (ignoring the country code and falling back to the more generic base language). If you set this to false, we would instead generate a fresh translation for “es-ES” and then cache it on the user’s device.

enableSkeletons
boolean
default: "true"

Whether we should show skeleton placeholders in place of text while the text is being translated.

skeletonColor
string
default: "#D6D6D6"

The color we should use for the skeleton placeholders while text is being translated.

debug
boolean
default: "false"

Whether we should show additional console.logs. This can be useful when debugging why things are translated in certain ways.

Generate a Translation File<TranslatedText />