Localization

Gravity supports client-side localisation with the i18next package. The section explains how to translate the client side UI.

Refer to the server-side localization section to learn how to translate the server-side code.

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.

/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.

{
  "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

Pro tip – ask ChatGPT to translate the JSON files to new languages.

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.

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)

import { useContext } from 'react'
import { ViewContext, useTranslation } from 'components/lib'

export function Card(props){

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

return (  
  <div>
  
    // useTranslation hook
    <div className={ Style.title }>
     { t('account.card.title') }
    </div>
    
    // props.t
    <div className={ Style.title }>
     { props.t('account.card.title') }
    </div>
    
    // viewContext
    <div className={ Style.title }>
     { viewContext.t('account.card.title') }
    </div>
    
 </div>
}

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.

// 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.

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