> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lexiconjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <TranslationProvider />

> Wrap your app in the *TranslationProvider* component to enable Lexicon within your app.

## 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](/docs/get-started/quickstart).

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

```tsx theme={null}
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.*

<Tip>
  Note: You can further improve performance and reduce costs by [generating a translation file](/docs/get-started/translation-file).
</Tip>

## Properties

This component accepts various properties.

<ResponseField name="token" type="string" required>
  The token should be the publishable key within your [Lexicon dashboard](https://app.lexiconjs.com/keys) and is required to use Lexicon.
</ResponseField>

<ResponseField name="defaultLanguage" type="string" default="en-US">
  The language that you wrote your app in and are translating it from.

  Example: `en-US`
</ResponseField>

<ResponseField name="translations" type="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](/docs/get-started/translation-file) for details on generating this file.
</ResponseField>

<ResponseField name="targetLanguage" type="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`
</ResponseField>

<ResponseField name="translationGuidance" type="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`
</ResponseField>

<ResponseField name="cacheTranslationsOnDevice" type="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!
</ResponseField>

<ResponseField name="ignoreDefaultLanguageCountry" type="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.
</ResponseField>

<ResponseField name="fallbackToBaseLanguage" type="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.
</ResponseField>

<ResponseField name="enableSkeletons" type="boolean" default="true">
  Whether we should show skeleton placeholders in place of text while the text is being translated.
</ResponseField>

<ResponseField name="skeletonColor" type="string" default="#D6D6D6">
  The color we should use for the skeleton placeholders while text is being translated.
</ResponseField>

<ResponseField name="debug" type="boolean" default="false">
  Whether we should show additional console.logs. This can be useful when debugging why things are translated in certain ways.
</ResponseField>