# Localization

{% hint style="info" %}
Refer to the [server-side localization](/gravity-server/localization.md) section to learn how to translate the server-side code.
{% endhint %}

## Locale Files

Locale files are stored inside the `/src/locales` folder, and each language has its own folder of `.json` files. The locales are split to match the same structure as the views.

All `.json` files inside each locale folder are automatically imported and combined, so you can add more JSON files without explicitly importing them anywhere.

```javascript
/locales
  /en
    en_dashboard.json
    en_help.json
  /es
    es_dashboard.json
    es_help.json
```

The locale files are simple JSON files containing the strings. The keys are always the same (in English) as these are referenced in the code. The string changes depending on the language.

```json
{
  "title": "Dashboard",
  "message": {
      "title": "Welcome to Gravity!",
      "text": "This is a sample dashboard to get you started. Please read the documentation to learn how to build your own features."
},
{
  "title": "Tablero de Control",
  "message": {
    "title": "¡Bienvenido a Gravity!",
    "text": "Este es un tablero de muestra para comenzar. Por favor, lea la documentación para aprender a construir sus propias características."
},
```

### Adding More Locales

{% hint style="info" %}
Pro tip – ask [ChatGPT](https://chat.openai.com/) to translate the JSON files to new languages.
{% endhint %}

1. Create a new folder inside the `/locales` file with the local name eg. `/fr` and add your JSON files.
2. Import the locale to `app.js` and add it to the `resources` section of the i18n `config`.

```javascript
import French from 'locales/fr/index'

i18n.use(initReactI18next).init({
  resources: {
    en: English,
    es: Spanish,
    fr: French // new language
  }
});
```

## Performing Translations

Translations can be performed in three ways: 

1. Using the `useTranslation` hook (available anywhere)
2. Using `props.t` (available in all `View` components inside `/views`)
3. Using `ViewContext` (available anywhere)

<pre class="language-javascript"><code class="lang-javascript">import { useContext } from 'react'
import { ViewContext, useTranslation } from 'components/lib'

export function Card(props){

  const { t } = useTranslation();
  const viewContext = useContext(ViewContext)

return (  
  &#x3C;div>
  
    // useTranslation hook
<strong>    &#x3C;div className={ Style.title }>
</strong><strong>     { t('account.card.title') }
</strong>    &#x3C;/div>
    
    // props.t
    &#x3C;div className={ Style.title }>
     { props.t('account.card.title') }
    &#x3C;/div>
    
    // viewContext
    &#x3C;div className={ Style.title }>
     { viewContext.t('account.card.title') }
    &#x3C;/div>
    
 &#x3C;/div>
}
</code></pre>

## Table Translations

To translate the table headers, you can pass the a string reference to the translation object to the `translation` prop of the `<Table/>`. The JSON object should be named `header`.

```javascript
// json
"invoice": {
  "header": {
  "name": "name",
  "key": "key",
  "scope": "scope",
  "active": "active"
  }
}

<Table translation='account.billing.invoice' />
```

## Switching Languages

There is a language switcher component at the top right of the UI for changing the language. You can add more languages to the dropdown in `/components/locale`. You will need to import any additional flags you want to use.

```javascript
import { GB, ES, FR } from 'country-flag-icons/react/3x2'
const flags = { en: GB, es: ES, fr: FR }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/localization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.